"use client";
import { usePermission } from "@/utils/auth/permission";
import { useParseError } from "@/utils/lib/helpers";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { FC, useEffect, useRef, useState, memo } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { toast } from "react-toastify";
import ActionButton from "../action-button";
import DropdownList from "../common/Dropdown";
import MoneyFormat from "../common/money";
import {
    Datepicker,
    InputField,
    Radio,
    Select,
    Textarea,
} from "../forms/Inputs";
import {
    TSinvoicePaySchema,
    invoicePaySchema,
} from "../forms/schema/invoice-pay";
import getData from "@/utils/fetch";
import { Modal } from "flowbite-react";
import { MdPrint } from "react-icons/md";
import InvoicePrint from "./invoice-print";
import Spinner from "../spinner";

type Props = {
    invoiceId?: string;
    isOpen?: boolean,
    setOpen?: (isOpen: boolean) => void
};

const InvoicePayModal: FC<Props> = memo(({ invoiceId, isOpen = false, setOpen = () => { } }) => {
    const queryClient = useQueryClient();
    const [status, setStatus] = useState("paid");
    const [showPrint, setShowPrint] = useState(false);

    const getInvoice = async () => {
        const data = await getData(`/api/v1/invoices/${invoiceId}`);
        const result = data?.data;
        return result;
    };

    const { data: invoice, isLoading } = useQuery({
        queryKey: ['invoice', invoiceId],
        queryFn: getInvoice,
        enabled: !!invoiceId,
    });

    const zoneForm = useForm<TSinvoicePaySchema>({
        resolver: zodResolver(invoicePaySchema),
        mode: "onChange",
        defaultValues: invoice,
    });

    const inputRef = useRef<HTMLInputElement>(null);

    const {
        handleSubmit,
        setValue,
        setError,
        formState: { errors },
    } = zoneForm;

    const {
        mutate: submitInvoice,
        isPending,
    } = useMutation({
        mutationFn: async (invoiceData: TSinvoicePaySchema) => {
            const api_url = `/api/invoices/pay/${invoice?.id}`;
            const { data } = await axios({
                method: "put",
                url: api_url,
                data: invoiceData,
            });
            const status = data?.data?.status;
            if (status && (status === 'paid' || status === 'partial')) {
                setShowPrint(true);
            }
            return data?.data;
        },
        onSuccess: (data) => {
            toast.success(`Invoice complete successfully!`);
            queryClient.invalidateQueries({ queryKey: ["invoices"] });
        },
        onError: (error: any) => {
            if (useParseError(error)) {
                toast.error(useParseError(error));
            } else {
                toast.error(
                    "Unable to complete the request, please check all information is correct and try again"
                );
            }
        },
    });
    const onSubmit = async (data: TSinvoicePaySchema) => {
        delete data.id;
        console.log(data);
        //return;
        if (!data.fund_id) {
            setError("fund_id", {
                type: "manual",
                message: "Payment method is required!",
            });
            return;
        }
        if (data.status === "partial_paid" && data?.partial_amount <= 0) {
            setError("partial_amount", {
                type: "manual",
                message: "Amount must be grater then 0",
            });
            return;
        }
        submitInvoice(data);
    };

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

    useEffect(() => {
        setValue("status", status);
        if (invoice?.total_amount) {
            setValue("total_amount", invoice?.total_amount);
        }
    }, [setValue, invoice]);
    const [isShow, setShow] = useState(false);
    return (
        <>
            <Modal onClose={() => setOpen(false)} show={isOpen}>
                <Modal.Header className="border-b border-gray-200 p-3 dark:border-gray-700">
                    <div className="flex">
                        <div>Invoice pay</div>
                        <div>
                            {usePermission("invoices.show") && showPrint && (
                                <>
                                    <ActionButton
                                        type="any"
                                        color="white"
                                        className="bg-white hover:!bg-gray-300 dark:bg-gray-800 dark:hover:!bg-gray-700 mr-1"
                                        size={"xs"}
                                        onClick={() => setShow(true)}
                                    >
                                        <MdPrint className="text-lg" />
                                    </ActionButton>
                                    <InvoicePrint
                                        invoice={invoice}
                                        isShow={isShow}
                                        setShow={setShow}
                                    />
                                </>
                            )}
                        </div>
                    </div>

                </Modal.Header>
                <Modal.Body>
                    <div>
                        {isLoading ? (
                            <div className="relative pb-20 min-h-[250px]">
                                <div className="grid fixed left-2/4 top-1/2 z-50">
                                    <Spinner size="md" color="purple" />
                                </div>
                            </div>
                        ) : (
                            <div className=" bg-white">
                                <div className="block md:flex lg:flex gap-10 border-b pb-2">
                                    <div className="w-full max-w-[180px] mb-6 md:mb-0 lg:mb-0">
                                        <div>
                                            <div className="flex font-medium text-gray-900">
                                                <div>Total Due :</div>{" "}
                                                <MoneyFormat amount={invoice?.total_amount} iconClass="mt-1" />
                                            </div>
                                            <div className="flex font-medium text-green-600">
                                                <div>Paid :</div>{" "}
                                                <MoneyFormat amount={invoice?.amount_paid} iconClass="mt-1" />
                                            </div>
                                            <div className="flex font-medium text-green-600">
                                                <div>Discount :</div>{" "}
                                                <MoneyFormat
                                                    amount={invoice?.total_discount}
                                                    iconClass="mt-1"
                                                />
                                            </div>
                                            <div className="flex font-medium text-red-600 divide-y-2 mt-1">
                                                <hr />
                                                <div> Due : </div>
                                                <MoneyFormat amount={invoice?.amount_due} iconClass="mt-1" />
                                            </div>
                                        </div>
                                    </div>
                                    <div className="flex justify-start md:justify-center lg:justify-center sm:justify-center">
                                        <div>
                                            {invoice?.reseller ? (
                                                <>
                                                    <p>
                                                        Name :{" "}
                                                        {invoice?.reseller?.company
                                                            ? invoice?.reseller?.company
                                                            : invoice?.reseller?.name}
                                                    </p>
                                                    <p>
                                                        Phone :{" "}
                                                        {invoice?.reseller?.company_phone
                                                            ? invoice?.reseller?.company_phone
                                                            : invoice?.reseller?.phone}
                                                    </p>
                                                    <p>Address : {invoice?.reseller?.company_address}</p>
                                                </>
                                            ) : (
                                                <>
                                                    <p>Name : {invoice?.client?.name}</p>
                                                    <p>Phone : {invoice?.client?.phone}</p>
                                                    <p>Address : {invoice?.client?.current_address}</p>
                                                </>
                                            )}
                                            <p>Create Date : {invoice?.create_date}</p>
                                            <p>Due Date : {invoice?.due_date}</p>
                                        </div>
                                    </div>
                                </div>
                                <FormProvider {...zoneForm}>
                                    <form onSubmit={handleSubmit(onSubmit, onError)} className="mt-3">
                                        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                                            <div className="left">
                                                <div className="mt-1">
                                                    <label htmlFor="" className="block mb-2">
                                                        Invoice Type
                                                    </label>
                                                    <DropdownList
                                                        name="invoice_type"
                                                        idName="invoice_type_id"
                                                        getLabel={(invoiceType: any) => invoiceType?.name}
                                                        placeholder="Invoice Type"
                                                        isMulti={false}
                                                        defaultItems={invoice?.invoice_type}
                                                    />
                                                </div>
                                                <div className="mt-1">
                                                    <InputField
                                                        labelText="Amount"
                                                        name="total_amount"
                                                        placeholder="Amount of Taka"
                                                        errors={errors}
                                                        readonly={true}
                                                    />
                                                </div>
                                                <div className="mt-1">
                                                    <InputField
                                                        labelText="Discount"
                                                        name="total_discount"
                                                        placeholder="Discount"
                                                        readonly={true}
                                                        errors={errors}
                                                    />
                                                </div>
                                                <div className="mt-4">
                                                    <label htmlFor="" className="block mb-2">
                                                        Payment Method (Fund)
                                                    </label>
                                                    <DropdownList
                                                        name="fund"
                                                        idName="fund_id"
                                                        getLabel={(method: any) => method?.name}
                                                        placeholder="Fund"
                                                        isMulti={false}
                                                        defaultItems={invoice?.fund}
                                                    />
                                                </div>
                                                <div className="mt-1">
                                                    <label htmlFor="" className="block mb-2">
                                                        Client
                                                    </label>
                                                    <DropdownList
                                                        name="client"
                                                        placeholder="Client"
                                                        idName="client_id"
                                                        isMulti={false}
                                                        getLabel={(dropdownClient) => dropdownClient.name}
                                                        defaultItems={invoice?.client}
                                                        isDisabled={true}
                                                    />
                                                </div>

                                            </div>
                                            <div className="right">
                                                <div className="mt-1">
                                                    <InputField
                                                        labelText="Transaction ID"
                                                        name="transaction_id"
                                                        placeholder="Transaction ID"
                                                        errors={errors}
                                                    />
                                                </div>
                                                <div className="mt-1">
                                                    <InputField
                                                        labelText="Reference"
                                                        name="reference"
                                                        placeholder="reference"
                                                        errors={errors}
                                                    />
                                                </div>
                                                <div className="mt-1">
                                                    <Select
                                                        defaultValue={status}
                                                        options={[
                                                            { value: "paid", label: "Paid" },
                                                            { value: "partial_paid", label: "Partial Paid" },
                                                        ]}
                                                        labelText="Status"
                                                        name="status"
                                                        errors={errors}
                                                        onChange={(e) => setStatus(e.target.value)}
                                                    />
                                                </div>
                                                {status === "partial_paid" && (
                                                    <div className="mt-1">
                                                        <InputField
                                                            labelText="Partial Amount paid"
                                                            name="partial_amount"
                                                            placeholder="Partial amount"
                                                            errors={errors}
                                                        />
                                                    </div>
                                                )}
                                                <div className="mt-1">
                                                    <Datepicker
                                                        name="payment_date"
                                                        labelText="Payment Date"
                                                        defaultDate={invoice?.payment_date}
                                                    />
                                                </div>
                                                <div className="mt-8">
                                                    <Radio
                                                        groupLabel="Send SMS"
                                                        name="confirmation_sms"
                                                        options={[
                                                            { label: "Yes", value: 1 },
                                                            { label: "No", value: 0 },
                                                        ]}
                                                        defaultValue={1}
                                                        labelFlex={true}
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div className="mt-2">
                                            <Textarea
                                                labelText="Note"
                                                name="note"
                                                rows={2}
                                                placeholder="Note"
                                            />
                                        </div>
                                        <div className="grid grid-cols-1 gap-6 sm:grid-cols-1"></div>
                                        <input className="opacity-0" type="submit" ref={inputRef} />
                                    </form>
                                </FormProvider>
                            </div>

                        )}
                    </div>

                </Modal.Body>
                <Modal.Footer className="flex justify-between">
                    {usePermission("invoices.edit") && (
                        <ActionButton
                            isLoading={isPending}
                            type="submit"
                            onClick={() => inputRef.current?.click()}
                        />
                    )}
                    <div>
                        {usePermission("invoices.show") && showPrint && (
                            <>
                                <ActionButton
                                    type="any"
                                    color="white"
                                    className="bg-white hover:!bg-gray-300 dark:bg-gray-800 dark:hover:!bg-gray-700 mr-1"
                                    size={"xs"}
                                    onClick={() => setShow(true)}
                                >
                                    <MdPrint className="text-lg" />
                                </ActionButton>
                                <InvoicePrint
                                    invoice={invoice}
                                    isShow={isShow}
                                    setShow={setShow}
                                />
                            </>
                        )}
                    </div>
                </Modal.Footer>
            </Modal>
        </>
    );
});

export default InvoicePayModal;