"use client";
import { usePermission } from "@/utils/auth/permission";
import { cellIndex, useParseFloat } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Alert, Badge, Pagination, Spinner } from "flowbite-react";
import { FC, useEffect, useState } from "react";
import { HiEye, HiInformationCircle, HiMinus, HiPlus } from "react-icons/hi";
import ActionButton from "../action-button";
import DeleteRecord from "../common/delete-record";
import DataTable from "../dataTable/data-table-fb";
import MoneyFormat from "../common/money";
import FundForm from "./fund-form";
import getData from "@/utils/fetch";
import FundTransactionForm from "./fund-transaction-form";
import ViewTransactions from "./view-transaction";
import DeleteItem from "../common/delete-item";

type props = {
    setBalance?: (balance: number) => void,
    filterValue?: string,
    report?: boolean
}

const FundList: FC<props> = ({ setBalance = () => { }, filterValue, report = false }) => {
    const [currentPage, setCurrentPage] = useState(1);
    const [pagination, setPagination] = useState<any>({});
    const [isOpen, setOpen] = useState(false);

    let base_url = `${'/api/v1/funds'}?page=${currentPage}`;
    let url = filterValue ? `${base_url}&${filterValue}` : base_url;
    const onPageChange = (page: number) => setCurrentPage(page);
    const getFunds = async () => {
        const {
            data: { data },
            data: { pagination },
            data: { report }
        } = await getData(url);
        setPagination(pagination);
        setBalance(report?.total_balance);
        return data;
    };
    const {
        data: funds,
        isLoading,
        refetch,
    } = useQuery({
        queryKey: ["funds", { currentPage }],
        placeholderData: keepPreviousData,
        queryFn: () => getFunds(),
        retry: 0,
    });


    useEffect(() => {
        if (!filterValue?.includes("#")) {
            setCurrentPage(1);
            refetch();
        }
    }, [filterValue]);


    const columns = [
        {
            header: "SL",
            cell: ({ row }: any) => (
                <div className="font-bold">{cellIndex(row.index, pagination)}</div>
            ),
        },
        {
            header: "Short Name",
            accessorKey: "short_name",
        },
        {
            header: "Fund name",
            accessorKey: "name",
            cell: ({ row }: any) => {
                const fund = row.original;
                return <div>{`${fund.name} `}</div>;
            },
        },
        {
            header: "Staff",
            accessorKey: "staff",
            cell: ({ row }: any) => {
                const fund = row.original;
                console.log(fund);
                return <div>{`${fund?.staff?.name ?? ""} `}</div>;
            },
        },
        {
            header: "Account Number",
            accessorKey: "account_number",
        },
        {
            header: "Balance",
            visibility: false,
            enableHiding: true,
            hide: true,
            accessorKey: "balance",
            cell: ({ row }: any) => {
                const fund = row.original;
                return (
                    <Badge className="w-fit" color="indigo">
                        <MoneyFormat className="w-auto" moneyClass="text-gray-900 font-semibold mt-0.5" amount={useParseFloat(fund?.balance)} />
                    </Badge>
                );
            },
        },
        {
            header: "Actions",
            id: "testing",
            cell: ({ row }: any) => {
                const fund = row.original;
                const fund_id: string = String(fund.id);
                const [isEdit, setEdit] = useState(false);
                const [isOpen, setOpen] = useState(false);
                const [isTransactionOpen, setTransactionOpen] = useState(false);
                return (
                    <>
                        <div className=" flex">
                            <div className="mr-2">
                                {usePermission("funds.edit") && (
                                    <>
                                        <ActionButton
                                            type="edit"
                                            onClick={() => setEdit(true)}
                                        />
                                        {isEdit && (
                                            <FundForm
                                                fund={fund}
                                                key={fund_id}
                                                setOpen={setEdit}
                                                isOpen={isEdit}
                                                mode="edit"
                                            />
                                        )}
                                    </>
                                )}
                            </div>
                            {usePermission("fund-transactions.create") && (
                                <>
                                    <ActionButton
                                        type="any"
                                        onClick={() => {
                                            setOpen(true);
                                        }}
                                        size="xs"
                                        color="white"
                                        className="!p-0 !m-0"
                                    >
                                        <div className="bg-gray-50 px-2 py-1.5 rounded-md">
                                            <HiPlus className="text-lg text-green-600" />
                                        </div>
                                    </ActionButton>
                                    {isOpen && (
                                        <FundTransactionForm key={fund_id} fund={fund} isOpen={isOpen} setOpen={setOpen} />
                                    )}
                                </>
                            )}
                            {usePermission("fund-transactions.show") && (
                                <>
                                    <ActionButton
                                        type="any"
                                        onClick={() => {
                                            setTransactionOpen(true);
                                        }}
                                        size="xs"
                                        color="white"
                                        className="!p-0 !m-0"
                                    >
                                        <div className="bg-gray-50 px-2 py-1.5 rounded-md">
                                            <HiEye className="text-lg " />
                                        </div>
                                    </ActionButton>
                                    {isTransactionOpen && (
                                        <ViewTransactions key={fund_id} fund_id={fund_id} isOpen={isTransactionOpen} setOpen={setTransactionOpen} />
                                    )}
                                </>
                            )}
                            {(usePermission("funds.delete") && fund.deletable > 0) && (
                                <DeleteItem
                                    keys="funds"
                                    url={`/api/v1/funds/${fund_id}`}
                                    name="fund"
                                />
                            )}
                        </div>
                    </>
                );
            },
        },
    ];

    return (
        <>
            {isLoading && (
                <div className="text-center">
                    <Spinner
                        aria-label="Center-aligned spinner example"
                        className="mt-20"
                        size="xl"
                    />
                </div>
            )}

            {funds !== undefined && (
                <div className="user-list pb-20 shadow-md">
                    <div className="border-b overflow-x-auto">
                        <DataTable data={funds} columns={columns} loading={isOpen} hideColumns={['balance']} />
                    </div>

                    <div className="flex justify-between overflow-x-auto">
                        <div className="flex">
                            <Pagination
                                className="ml-2 mt-2"
                                layout="navigation"
                                currentPage={currentPage}
                                totalPages={pagination.total_pages || 0}
                                onPageChange={onPageChange}
                                showIcons
                                nextLabel=""
                                previousLabel=""
                            />
                            <div className="ml-2 mt-5">
                                <p className="text-gray-500">
                                    Showing
                                    <span className="ml-2 mr-1 mt-1 text-gray-900">
                                        {(pagination.current_page - 1) * 10 < 1
                                            ? 1
                                            : (pagination.current_page - 1) * 10}{" "}
                                        - {pagination.current_page * 10}
                                    </span>{" "}
                                    of <span className="text-gray-900"> {pagination.total}</span>{" "}
                                </p>
                            </div>
                        </div>
                        <Pagination
                            currentPage={currentPage}
                            totalPages={pagination.total_pages || 0}
                            onPageChange={onPageChange}
                            className="mr-2 mt-2 text-blue-900 sm:justify-end"
                            showIcons
                            color="blue"
                        />
                    </div>
                </div>
            )}
        </>
    );
};
export default FundList;