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

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

const FundTransactionForm: FC<Props> = ({ isOpen, setOpen, fund }) => {
    const queryClient = useQueryClient();
    const [transactionType, setTransactionType] = useState("deposit");

    const fundForm = useForm<TSfundTransactionSchema>({
        resolver: zodResolver(fundTransactionSchema),
        defaultValues: {
            amount: 0,
            note: "",
            transfer_by: null,
            transaction_type: "deposit",
        },
    });
    const inputRef = useRef<HTMLInputElement>(null);

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

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

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

    return (
        <>
            <Modal onClose={() => setOpen(false)} show={isOpen} size={"xl"}>
                <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
                    <div className="font-normal">Fund transaction</div>
                    <div className="text-sm flex text-gray-500 mt-2 bg-gray-100 px-2 py-1 rounded-md">
                        <div>{fund?.name}</div>: <MoneyFormat amount={fund?.balance} />
                    </div>
                </Modal.Header>
                <Modal.Body>
                    <FormProvider {...fundForm}>
                        <form onSubmit={handleSubmit(onSubmit, onError)}>
                            <div className="grid grid-cols-1 gap-6">
                                <div>
                                    <div>
                                        <Select
                                            defaultValue={"deposit"}
                                            options={[
                                                { value: "deposit", label: "Deposit" },
                                                { value: "transfer", label: "Transfer" },
                                                { value: "withdraw", label: "Withdraw" },
                                                { value: "expense", label: "Expense" },
                                                { value: "salary", label: "Salary" },
                                            ]}
                                            labelText="Transaction Type"
                                            name="transaction_type"
                                            errors={errors}
                                            onChange={(transfer) => setTransactionType(transfer?.target?.value)}
                                        />
                                    </div>
                                    <div>
                                        <InputField
                                            labelText="Amount"
                                            name="amount"
                                            placeholder="Amount"
                                            inputType="number"
                                            errors={errors}
                                        />
                                    </div>
                                    {transactionType === "transfer" && (
                                        <div>
                                            <div className="mb-2">
                                                <Label>Transfer to</Label>
                                            </div>
                                            <DropdownList
                                                name="fund"
                                                idName="transfer_by"
                                                filter={`${fund?.id}`}
                                                getLabel={(fund) => fund.name}
                                                isMulti={false}
                                            />
                                        </div>
                                    )}

                                    <div className="mt-1">
                                        <Textarea
                                            rows={3}
                                            labelText="Notes"
                                            name="note"
                                            placeholder="Optional"
                                            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 FundTransactionForm;