"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 tagSchema = z.object({
    name: z.string().min(1, "Name is required"),
});

type TTagSchema = z.infer<typeof tagSchema>;

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

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

    const getTag = async (): Promise<TTagSchema> => {
        if (mode === "edit" && isOpen) {
            const response = await getData(`/api/v1/tags/${tag_id}`);
            return response?.data;
        }
        return {}
    }

    const tagForm = useForm<TTagSchema>({
        resolver: zodResolver(tagSchema),
        mode: "onChange",
        defaultValues: async () => getTag(),
    });

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

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

    const onSubmit = (data: TTagSchema) => {
        submitTag(data);
    };

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

    return (
        <Modal show={isOpen} onClose={() => setOpen(false)}>
            <Modal.Header>
                {mode === "edit" ? "Edit Tag" : "Create New Tag"}
            </Modal.Header>
            <Modal.Body>
                <FormProvider {...tagForm}>
                    <form onSubmit={handleSubmit(onSubmit, onError)} className="space-y-4">
                        <div>
                            <InputField
                                name="name"
                                labelText="Name"
                                placeholder="Enter tag 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 TagForm;