"use client";
import { usePermission } from "@/utils/auth/permission";
import getData from "@/utils/fetch";
import { cellIndex, useParseFloat } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { Button, Tooltip } from "flowbite-react";
import dynamic from "next/dynamic";
import Link from "next/link";
import { FC, useEffect, useState } from "react";
import { HiOutlineCash } from "react-icons/hi";
import { MdPrint } from "react-icons/md";
import ActionButton from "../action-button";
import DeleteItem from "../common/delete-item";
import MoneyFormat from "../common/money";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import Spinner from "../spinner";
import InvoicePayModal from "./invoice-pay-modal";
import { toast } from "react-toastify";
import BulkInvoicePayModal from "./bulk-invoice-pay-modal";
const InvoicePrint = dynamic(() => import("./invoice-print"));

type props = {
  filterValue?: string | null;
  reports?: any;
  setReports: (x: InvoiceReports) => void;
  setInvoiceCount: (x: number) => void;
  api?: string;
};

const InvoiceList: FC<props> = ({
  filterValue,
  setReports,
  setInvoiceCount,
  api = "/api/v1/invoices",
}) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pagination, setPagination] = useState<any>({});
  const onPageChange = (page: number) => setCurrentPage(page);

  let base_url = `${api}?page=${currentPage}`;
  let url = filterValue ? `${base_url}&${filterValue}` : base_url;
  const getPayments = async () => {
    const {
      data: { data },
      data: { pagination },
      data: { reports },
    } = await getData(url);
    setPagination(pagination);
    setReports(reports);
    setInvoiceCount(useParseFloat(pagination?.total));
    return data;
  };
  const {
    data: invoices,
    isLoading,
    isFetching,
    isError,
    refetch,
    error = {} as any,
  } = useQuery({
    queryKey: ["invoices", { currentPage }],
    placeholderData: keepPreviousData,
    queryFn: () => getPayments(),
    refetchOnWindowFocus: false,
  });

  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: "ID",
      accessorKey: "trackID",
    },
    {
      header: "Create(Date)",
      accessorKey: "create_date",
    },
    {
      header: "Due(Date)",
      accessorKey: "due_date",
    },
    {
      header: "Type",
      cell: ({ row }: any) => {
        const invoice = row.original;
        return <p className="capitalize">{invoice?.invoice_type?.name}</p>;
      },
    },
    {
      header: "Client",
      cell: ({ row }: any) => {
        const invoice = row.original;
        return <p>{invoice?.client?.name}</p>;
      },
    },
    {
      header: "Zone",
      cell: ({ row }: any) => {
        const invoice = row.original;
        return <p>{invoice?.zone?.name}</p>;
      },
    },
    {
      header: "Note",
      cell: ({ row }: any) => {
        const invoice = row.original;
        return (<>
          <Tooltip content={invoice?.note ?? ""}>
            <p className="line-clamp-1">
              {invoice?.note ?? ""}</p>
          </Tooltip>
        </>);
      },
    },
    {
      header: "Amount",
      accessorKey: "amount",
      cell: ({ row }: any) => {
        const invoice = row.original;
        const discount = useParseFloat(invoice?.discount) + useParseFloat(invoice?.line_total_discount);
        console.log(discount, 'discount');
        const color =
          invoice.amount_paid < invoice.after_discount_amount
            ? "text-blue-600"
            : "text-green-600";
        return (
          <>
            <MoneyFormat
              amount={invoice?.total_amount}
              moneyClass={color}
              iconClass={color}
              discount={discount}
            />
            {invoice?.amount_paid > 0 &&
              invoice?.amount_paid < invoice?.after_discount_amount && (
                <Tooltip content={`Paid`}>
                  <MoneyFormat
                    moneyClass="font-medium text-center text-xs text-green-600"
                    iconClass="text-xs ml-2 text-green-600"
                    amount={invoice?.amount_paid}
                    discount={discount}
                  />
                </Tooltip>
              )}
          </>
        );
      },
    },
    {
      header: "status",
      accessorKey: "status",
      cell: ({ row }: any) => {
        const invoice = row.original;
        const color =
          invoice.status === "paid" ? "text-green-600" : "text-red-600";
        return (
          <>
            {
              <p className={`${color} font-bold capitalize`}>
                {invoice.status}
              </p>
            }
          </>
        );
      },
    },

    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const invoice = row.original;
        const invoice_id: string = String(invoice.id);
        const [isShow, setShow] = useState(false);
        const [isLoading, setLoading] = useState(false);
        const [isInvoicePay, setInvoicePay] = useState(false);
        const [client, setClient] = useState<any>(null);
        return (
          <>
            <div className=" flex">
              <div className="mr-2">
                {usePermission("invoices.edit") &&
                  invoice?.status === "due" && (
                    <Link href={`/invoices/edit/${invoice_id}`}>
                      <ActionButton type="edit" />
                    </Link>
                  )}
              </div>
              <div>
                {usePermission("invoices.pay") &&
                  (invoice?.status === "due" ||
                    invoice?.status === "partial") && (
                    <Button
                      size={"xs"}
                      onClick={async () => {
                        setLoading(true);
                        const { data } = await getData(`/api/v1/clients/${invoice?.client?.uuid}`);
                        if (data?.client?.invoiceDue?.length > 0) {
                          setInvoicePay(true);
                          setClient(data?.client);
                        } else {
                          toast.error("No invoice due for this client");
                        }
                        setLoading(false);
                      }}
                    >
                      {isLoading ? <Spinner size="xs" color="purple" /> : (
                        <span>
                          <HiOutlineCash className="text-lg" />
                        </span>
                      )}
                      <span className="ml-1">Pay</span>
                    </Button>
                  )}
                {isInvoicePay && (
                  <BulkInvoicePayModal
                    isOpen={isInvoicePay}
                    setOpen={() => setInvoicePay(false)}
                    client={client}
                  />
                )}
              </div>
              <div>
                {usePermission("invoices.show") &&
                  (invoice?.status === "paid" ||
                    invoice?.status === "partial") && (
                    <>
                      <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>
                {usePermission("invoices.delete") && (
                  <>
                    <DeleteItem
                      name="invoices"
                      keys="invoices"
                      url={`/api/v1/invoices/${invoice_id}`}
                    />
                  </>
                )}
              </div>
            </div>
          </>
        );
      },
    },
  ];

  return (
    <>
      {(isLoading || isFetching) && (
        <div className="relative">
          <div className="fixed left-2/4 top-1/2 z-50">
            <Spinner size="xl" color="purple" />
          </div>
        </div>
      )}
      {invoices !== undefined && (
        <div className="user-list pb-20">
          <div className="border-b overflow-x-auto dark:border-gray-500 border rounded-lg border-gray-200">
            <DataTable data={invoices} columns={columns} />
          </div>
          <CustomPagination
            pagination={pagination}
            currentPage={currentPage}
            onPageChange={onPageChange}
            keys="invoices"
          />
        </div>
      )}
    </>
  );
};
export default InvoiceList;