"use client";
import { usePermission } from "@/utils/auth/permission";
import getData from "@/utils/fetch";
import { cellIndex } from "@/utils/lib/helpers";
import Link from "next/link";
import { FC, useEffect, useState } from "react";
import { HiOutlineCash } from "react-icons/hi";
import { MdPrint } from "react-icons/md";
import Button from "../Button";
import ActionButton from "../action-button";
import ErrorMessages from "../common/error-messages";
import MoneyFormat from "../common/money";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import { TSinvoiceSchema } from "../forms/schema/invoice";
import Spinner from "../spinner";
import InvoicePrint from "./invoice-print";
import { twMerge } from "tailwind-merge";

type props = {
  initInvoices?: TSinvoiceSchema;
  initPagination?: Pagination;
  filterValue?: string | null;
  clientId?: string | null;
  setReports?: (x: any) => void;
  profileView?: boolean
};

const ClientInvoices: FC<props> = ({
  initInvoices,
  initPagination,
  clientId,
  filterValue,
  setReports = () => { },
  profileView = false
}) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pagination, setPagination] = useState<any>(initPagination);
  const [invoices, setInvoices] = useState<any>(initInvoices);
  const [isLoading, setLoading] = useState(false);

  const getInvoices = async (page: number) => {
    setLoading(true);
    let url = `/api/v1/invoices?page=${page}&client_uuid=${clientId}`;
    console.log(url);
    let api_url = filterValue ? `${url}&${filterValue}` : url;
    const response = await getData(api_url);
    if (!response?.success) {
      return <ErrorMessages message={response?.message} />;
    }
    const {
      data: { data: invoice },
      data: { pagination },
      data: { reports },
    } = response;
    setPagination(pagination);
    setInvoices(invoice);
    if (reports) {
      setReports(reports);
    }
    setLoading(false);
  };
  const onPageChange = (page: number) => {
    setCurrentPage(page);
    getInvoices(page);
  };

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

  const columns = [
    {
      header: "SL",
      cell: ({ row }: any) => (
        <div className="font-bold">{cellIndex(row.index, pagination)}</div>
      ),
    },
    {
      header: "ID",
      accessorKey: "trackID",
    },
    {
      header: "Date(Create)",
      accessorKey: "create_date",
    },
    {
      header: "Date(Due)",
      accessorKey: "due_date",
    },
    {
      header: "Amount",
      accessorKey: "amount",
      cell: ({ row }: any) => {
        const invoice = row.original;
        return (
          <>
            <MoneyFormat amount={invoice?.after_discount_amount} />
          </>
        );
      },
    },
    {
      header: "status",
      accessorKey: "status",
      cell: ({ row }: any) => {
        const invoice = row.original;
        return (
          <p
            className={`${invoice?.status === "paid" ? "text-green-600" : "text-red-600"} font-bold`}
          >
            {invoice?.status}
          </p>
        );
      },
    },
    {
      header: "Action",
      cell: ({ row }: any) => {
        const invoice = row.original;
        const [isShow, setShow] = useState(false);
        return (
          <div className="flex">
            <div className="">
              {usePermission("invoices.pay") && invoice?.status === "due" && (
                <Link href={`/invoices/pay/${invoice?.id}`}>
                  <Button size={"xs"}>
                    <HiOutlineCash className="text-lg" />
                    <span className="ml-1">Pay</span>
                  </Button>
                </Link>
              )}
            </div>
            <div className="">
              {usePermission("invoices.show") && invoice?.status === "paid" && (
                <>
                  <ActionButton
                    type="any"
                    color="white"
                    className="bg-white hover:!bg-gray-300 mr-1"
                    size={"xs"}
                    onClick={() => setShow(true)}
                  >
                    <MdPrint className="text-lg" />
                  </ActionButton>
                  <InvoicePrint
                    invoice={invoice}
                    isShow={isShow}
                    setShow={setShow}
                  />
                </>
              )}
            </div>
          </div>
        );
      },
    },
  ];

  return (
    <>
      {isLoading && (
        <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={twMerge("user-list", !profileView && "pb-20 shadow-md")}>
          <div className="border-b overflow-x-auto">
            <DataTable data={invoices} columns={columns} />
          </div>
          <CustomPagination
            pagination={pagination}
            currentPage={currentPage}
            onPageChange={onPageChange}
          />
        </div>
      )}
    </>
  );
};
export default ClientInvoices;