"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Spinner } from "flowbite-react";
import { FC, useRef } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { toast } from "react-toastify";
import Button from "../Button";
import { Modal } from "../Modal";
import { InputField } from "../forms/Inputs";
import { TSfundSchema, fundSchema } from "../forms/schema/fund";
import { useParseError } from "@/utils/lib/helpers";
import dynamic from "next/dynamic";
import { postData, putData } from "@/utils/fetch";
const DropdownList = dynamic(() => import("../common/Dropdown"));

type Props = {
    fund?: TSfundSchema;
    mode?: string;
    isOpen: boolean;
    setOpen: (x: boolean) => void;
};

const FundForm: FC<Props> = ({ fund, isOpen, setOpen, mode = "create" }) => {
    const queryClient = useQueryClient();
    const fundForm = useForm<TSfundSchema>({
        resolver: zodResolver(fundSchema),
        mode: "onChange",
        defaultValues: fund as TSfundSchema,
    });

    const inputRef = useRef<HTMLInputElement>(null);

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

    const {
        mutate: submitFund,
        isPending,
    } = useMutation({
        mutationFn: async (fundData: TSfundSchema) => {
            if (mode === "create") {
                const api_url = `/api/v1/funds`;
                const data = await postData(api_url, fundData);
                if (!data?.success) {
                    throw data;
                }
                return data?.data;
            }
            if (mode === 'edit') {
                const api_url = `/api/v1/funds/${fund?.id}`;
                const data = await putData(api_url, fundData);
                if (!data?.success) {
                    throw data;
                }
                return data?.data;
            }
        },
        onSuccess: (data) => {
            setOpen(false);
            toast.success(`Fund ${mode} successfully!`);
            queryClient.invalidateQueries({ queryKey: ["funds"] })
            reset();
        },
        onError: (error: any) => {
            toast.error(useParseError(error))
        },
    });
    const onSubmit = async (data: TSfundSchema) => {
        console.log(data);
        submitFund(data);
    };

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

    return (
        <>
            <Modal onClose={() => setOpen(false)} show={isOpen} size={"3xl"}>
                <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
                    {mode === "create" ? (
                        <p className="font-normal">Add new fund</p>
                    ) : (
                        <p className="font-normal">Edit fund</p>
                    )}
                </Modal.Header>
                <Modal.Body>
                    <FormProvider {...fundForm}>
                        <form onSubmit={handleSubmit(onSubmit, onError)}>
                            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                                <div>
                                    <div className="mt-1">
                                        <label htmlFor="staff_id" className="block mb-2">Staff</label>
                                        <DropdownList
                                            name="staff"
                                            idName="staff_id"
                                            getLabel={(option: any) => option.name}
                                            defaultItems={fund?.staff?.name}
                                            placeholder="Select Staff"
                                            isMulti={false}
                                            key={fund?.staff?.id}
                                        />
                                    </div>
                                    <div className="mt-1">
                                        <InputField
                                            labelText="Short name"
                                            name="short_name"
                                            placeholder="Short Name"
                                            errors={errors}
                                        />
                                    </div>

                                </div>
                                <div>
                                    <div className="mt-1">
                                        <InputField
                                            labelText="Fund name"
                                            name="name"
                                            placeholder="Fund Name"
                                            readonly={fund?.name === "cash" || fund?.name === 'bkash' ? true : false}
                                            errors={errors}
                                        />
                                    </div>

                                    <div className="mt-1">
                                        <InputField
                                            labelText="Account Number"
                                            name="account_number"
                                            placeholder="Account Number"
                                            errors={errors}
                                        />
                                    </div>
                                </div>
                            </div>
                            <input className="opacity-0" type="submit" ref={inputRef} />
                        </form>
                    </FormProvider>
                </Modal.Body>
                <Modal.Footer>
                    <Button color="blue" onClick={() => inputRef.current?.click()}>
                        {isPending && (
                            <Spinner aria-label="Spinner button example" size="sm" />
                        )}
                        Submit
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
};

export default FundForm;