import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
import { useForm } from "react-hook-form";
import { Form } from "@/components/ui/form";
import ReuseForm from "../../Reuseable/ReuseForm";
import { router } from "@inertiajs/react";
import { ToastMessage } from "../Toast/ToastMixin";
import { Loader2 } from "lucide-react";
import { useState } from "react";

export default function AddVisaStatusModal({ modalProps }) {
    const { buttonName, modalTitle } = modalProps;
    const [open, setOpen] = useState(false);
    const [loading, setLoading] = useState(false);

    const form = useForm({
        defaultValues: {
            visa_status: "",
        },
    });
    const onSubmit = async (data) => {
     
        setLoading(true);

        router.post("/visa-statuses", data, {
            onError: (errors) => {
                ToastMessage("error", `Please Check if you deleted it before`);
                Object.entries(errors).forEach(([field, message]) => {
                    form.setError(field, {
                        type: "server",
                        message: Array.isArray(message) ? message[0] : message,
                    });
                });
            },
            onSuccess: () => {
                ToastMessage("success", "Visa Status Added Successfully");
                setOpen(false);
                form.reset();
                form.clearErrors();
            },
            onFinish: () => {
                setLoading(false); 
            },
        });
    };
    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button
                    variant="outline"
                    className="bg-[#006362] text-white hover:bg-[#00bcd4] hover:text-white"
                >
                    {buttonName}
                </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px]">
                <DialogHeader>
                    <DialogTitle className="text-center">
                        {modalTitle}
                    </DialogTitle>
                    <DialogDescription></DialogDescription>
                </DialogHeader>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)}>
                        <div className="flex flex-col gap-4">
                            <ReuseForm
                                control={form.control}
                                name="visa_status"
                                label="Enter Visa Status"
                                placeholder="visa Status"
                                type="text"
                                required="true"
                            />

                            <DialogFooter>
                                <DialogClose asChild>
                                    <Button
                                        variant="modalCancel"
                                        className="bg-red-600 text-white hover:bg-red-500 hover:text-white cursor-pointer"
                                    >
                                        Cancel
                                    </Button>
                                </DialogClose>
                                <Button
                                    type="submit"
                                    className="bg-[#006362] text-white hover:bg-[#00bcd4] hover:text-white"
                                >
                                    {loading ? (
                                        <span className="flex items-center gap-2">
                                            <Loader2 className="h-4 w-4 animate-spin" />
                                            Submitting...
                                        </span>
                                    ) : (
                                        "Submit"
                                    )}
                                </Button>
                            </DialogFooter>
                        </div>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    );
}