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

import { Form } from "@/components/ui/form";

import { useForm } from "react-hook-form";
import { router } from "@inertiajs/react";
import { useState } from "react";
import { ToastMessage } from "../Toast/ToastMixin";
import ReuseForm from "@/components/Reuseable/ReuseForm";

export function UpdateUserModal({ updateProps }) {
    const [loading, setLoading] = useState(false);
    const [open, setOpen] = useState(false);
    const { buttonName, modalTitle, data } = updateProps;
    const form = useForm({
        defaultValues: data,
    });

    const onSubmit = (formValues) => {
        router.put(`/update-user/${formValues.id}`, formValues, {
            onError: (errors) => {
                ToastMessage("error", "Something Went Wrong, Please Try Again");
                Object.entries(errors).forEach(([field, message]) => {
                    form.setError(field, {
                        type: "server",
                        message: Array.isArray(message) ? message[0] : message,
                    });
                });
            },
            onSuccess: () => {
                ToastMessage("success", `User Updated Successfully`);
                setOpen(false);
                form.reset();
                form.clearErrors();
            },
            onFinish: () => {
                setLoading(false);
            },
        });
    };

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button className="bg-[#006362] text-white hover:bg-[#00bcd4]">
                    {buttonName}
                </Button>
            </DialogTrigger>

            <DialogContent className="sm:max-w-[600px]">
                <DialogTitle className="text-center text-2xl">{modalTitle}</DialogTitle>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)}>
                        <div className="flex flex-col gap-4">
                            <ReuseForm
                                control={form.control}
                                name="name"
                                label="Full Name"
                                placeholder="Update Full Name"
                                type="text"
                                required="true"
                            />
                            <ReuseForm
                                control={form.control}
                                name="email"
                                label="Email"
                                placeholder="example@gmail.com"
                                type="email"
                                required="true"
                            />
                            <ReuseForm
                                control={form.control}
                                name="password"
                                label="Update Password"
                                placeholder="Update or set new password"
                                type="text"
                                required="true"
                            />
                            <ReuseForm
                                control={form.control}
                                name="role"
                                label="	Role"
                                placeholder="Update Role"
                                type="select"
                                required="true"
                                options={[
                                    { id: "admin", label: "admin" },
                                    { id: "editor", label: "editor" },
                                ]}
                                valueKey="id"
                                labelKey="label"
                            />
                        </div>
                        <div className="flex items-center justify-center gap-4">
                            <DialogFooter className="mt-4">
                                <DialogClose asChild>
                                    <Button
                                        variant="destructive"
                                        className="cursor-pointer "
                                    >
                                        Cancel
                                    </Button>
                                </DialogClose>
                                <Button
                                    type="submit"
                                    className=" flex items-center justify-center cursor-pointer bg-[#006362]"
                                >
                                    {loading ? (
                                        <span className="flex items-center gap-2">
                                            <Loader2 className="h-4 w-4 animate-spin" />
                                            Updating...
                                        </span>
                                    ) : (
                                        "Update"
                                    )}
                                </Button>
                            </DialogFooter>
                        </div>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    );
}