import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";

import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { useState } from "react";
//import { z } from "zod";
//import { zodResolver } from "@hookform/resolvers/zod";
import { useQuery } from "@tanstack/react-query";
import { useSessionStore } from "@/lib/store/sessionStore";
import axios from "axios";
import { useForm } from "@tanstack/react-form";
import { Checkbox } from "@/components/ui/checkbox";

import { getModules } from "@/utils/querys/admin/modules";

// const FormSchema = z.object({
//     subModule: z.boolean(),
// });
export function ChangeModule({ module }: { module: any }) {
    const { token } = useSessionStore();
    const { refetch } = useQuery(getModules(token ?? ""));

    const [open, setOpen] = useState(false);
    const [saving, setSaving] = useState(false);
    const form = useForm({
        defaultValues: {
            active: module.active,
        },
        onSubmit: async ({ value }) => {
            //console.log(value);
            try {
                const result = await axios.patch(
                    `/api/server/modules/${module.module_id}`,
                    { active: value.active },
                    {
                        headers: { Authorization: `Bearer ${token}` },
                    }
                );

                if (result.data.success) {
                    setOpen(!open);
                    setSaving(false);
                    refetch();
                    toast.success(result.data.message);
                }
            } catch (error) {
                console.log(error);
            }
        },
    });

    return (
        <>
            <Dialog
                open={open}
                onOpenChange={(isOpen) => {
                    if (!open) {
                        form.reset();
                    }
                    setOpen(isOpen);
                    // toast.message("Model was something", {
                    //     description: isOpen ? "Modal is open" : "Modal is closed",
                    // });
                }}
            >
                <DialogTrigger asChild>
                    <Button variant="outline">Edit</Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-[425px]">
                    <DialogHeader>
                        <DialogTitle>{module.name}</DialogTitle>
                        <DialogDescription>
                            Set to active or deactivated.
                        </DialogDescription>
                    </DialogHeader>
                    <form
                        onSubmit={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                        }}
                    >
                        <div>
                            <>
                                <form.Field
                                    name="active"
                                    // validators={{
                                    //     // We can choose between form-wide and field-specific validators
                                    //     onChange: ({ value }) =>
                                    //         value.length > 3
                                    //             ? undefined
                                    //             : "Username must be longer than 3 letters",
                                    // }}
                                    children={(field) => {
                                        return (
                                            <div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
                                                <Label htmlFor="active">
                                                    Active
                                                </Label>
                                                <Checkbox
                                                    className="ml-2"
                                                    name={field.name}
                                                    onBlur={field.handleBlur}
                                                    checked={field.state.value}
                                                    onCheckedChange={(e) =>
                                                        field.handleChange(e)
                                                    }
                                                />
                                            </div>
                                        );
                                    }}
                                />
                            </>
                        </div>

                        <DialogFooter>
                            <div className="flex justify-end mt-2">
                                <Button
                                    type="submit"
                                    disabled={saving}
                                    onClick={form.handleSubmit}
                                >
                                    {saving ? (
                                        <>
                                            <span>Saving....</span>
                                        </>
                                    ) : (
                                        <span>Save setting</span>
                                    )}
                                </Button>
                            </div>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
        </>
    );
}