"use client";
import { Modal } from "flowbite-react";
import { FC, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "react-toastify";
import { InputField } from "../forms/Inputs";
import { z } from "zod";
import Spinner from "../spinner";
import ActionButton from "../action-button";
import getData, { postData, putData } from "@/utils/fetch";
import { useParseError } from "@/utils/lib/helpers";

const subjectSchema = z.object({
    name: z.string().min(1, "Name is required"),
});

type TSsubjectSchema = z.infer<typeof subjectSchema>;

interface Props {
    isOpen: boolean;
    setOpen: (value: boolean) => void;
    subject_id?: string;
    mode?: "create" | "edit";
}

const SubjectForm: FC<Props> = ({ isOpen, setOpen, subject_id, mode = "create" }) => {
    const queryClient = useQueryClient();
    const inputRef = useRef<HTMLInputElement>(null);

    const getSubject = async (): Promise<TSsubjectSchema> => {
        if (mode === "edit" && isOpen) {
            const response = await getData(`/api/v1/subjects/${subject_id}`);
            return response?.data;
        }
        return {}
    }

    const subjectForm = useForm<TSsubjectSchema>({
        resolver: zodResolver(subjectSchema),
        mode: "onChange",
        defaultValues: async () => getSubject(),
    });

    const {
        handleSubmit,
        reset,
        formState: { errors },
    } = subjectForm;

    const { mutate: submitSubject, isPending } = useMutation({
        mutationFn: async (subjectForm: TSsubjectSchema) => {
            if (mode === "create") {
                const data = await postData(
                    `/api/v1/subjects`,
                    subjectForm as any
                );
                return data;
            } else {
                const { data } = await putData(
                    `/api/v1/subjects/${subject_id}`,
                    subjectForm as any
                );
                return data;
            }
        },
        onSuccess: (data) => {
            queryClient.invalidateQueries({ queryKey: ["subjects"] });
            toast.success("Subject created successfully!");
            setOpen(false);
            reset();
        },
        onError: (error: any) => {
            toast.error(useParseError(error));
        },
    });

    const onSubmit = (data: TSsubjectSchema) => {
        submitSubject(data);
    };

    const onError = (data: any) => {
        console.log(data);
    };

    return (
        <Modal show={isOpen} onClose={() => setOpen(false)}>
            <Modal.Header>
                {mode === "edit" ? "Edit Subject" : "Create New Subject"}
            </Modal.Header>
            <Modal.Body>
                <FormProvider {...subjectForm}>
                    <form onSubmit={handleSubmit(onSubmit, onError)} className="space-y-4">
                        <div>
                            <InputField
                                name="name"
                                labelText="Name"
                                placeholder="Enter subject name"
                                errors={errors}
                            />
                        </div>

                        <input className="opacity-0" type="submit" ref={inputRef} />
                    </form>
                </FormProvider>
            </Modal.Body>
            <Modal.Footer>
                <ActionButton
                    onClick={() => inputRef.current?.click()}
                    type="submit"
                    title="Save"
                    isLoading={isPending}
                />
            </Modal.Footer>
        </Modal>
    );
};

export default SubjectForm;