"use client";
import { usePermission } from "@/utils/auth/permission";
import getData from "@/utils/fetch";
import { useParseFloat } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { Button } from "flowbite-react";
import Link from "next/link";
import { FC, useEffect, useState } from "react";
import { HiOutlineCash } from "react-icons/hi";
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";

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

const PaymentList: FC<props> = ({
  filterValue,
  setReports,
  setPaymentCount,
  api = "/api/v1/payments",
}) => {
  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);
    setPaymentCount(useParseFloat(pagination?.total));
    console.log(data, 'pd')
    return data;
  };
  const {
    data: payments,
    isLoading,
    isFetching,
    refetch,
  } = useQuery({
    queryKey: ["payments", { currentPage }],
    placeholderData: keepPreviousData,
    queryFn: () => getPayments(),
  });

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

  const columns = [
    {
      header: "PID",
      accessorKey: "pid",
    },
    {
      header: "Date(Payment)",
      accessorKey: "payment_date",
    },
    {
      header: "Note",
      cell: ({ row }: any) => {
        const payment = row.original;
        return <p className="line-clamp-1">{payment?.note}</p>;
      },
    },
    {
      header: "Client",
      cell: ({ row }: any) => {
        const payment = row.original;
        return <p>{payment?.client?.name}</p>;
      },
    },
    {
      header: "Zone",
      cell: ({ row }: any) => {
        const payment = row.original;
        return <p>{payment?.zone?.name}</p>;
      },
    },
    {
      header: "Collect By",
      cell: ({ row }: any) => {
        const payment = row.original;
        return <p>{payment?.staff?.name}</p>;
      },
    },
    {
      header: "Amount",
      accessorKey: "amount",
      cell: ({ row }: any) => {
        const payment = row.original;
        return (
          <>
            <MoneyFormat amount={payment?.amount} />
          </>
        );
      },
    },
    {
      header: "method",
      accessorKey: "fund",
      cell: ({ row }: any) => {
        const payment = row.original;
        return <p>{payment?.fund?.name}</p>;
      },
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const payment = row.original;
        const payment_id: string = String(payment.id);
        return (
          <>
            <div className=" flex">
              <div>
                {usePermission("payments.show") &&
                  payment?.status === "due" && (
                    <Link href={`/payments/pay/${payment_id}`}>
                      <Button size={"xs"}>
                        <HiOutlineCash className="text-lg" />
                        <span className="ml-1">Pay</span>
                      </Button>
                    </Link>
                  )}
              </div>
              <div>
                {usePermission("payments.delete") && (
                  <>
                    <DeleteItem
                      name="payments"
                      keys="payments"
                      url={`/api/v1/payments/${payment_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>
      )}
      {payments !== undefined && (
        <div className="user-list pb-20 shadow-md">
          <div className="border-b overflow-x-auto">
            <DataTable data={payments} columns={columns} />
          </div>
          <CustomPagination
            pagination={pagination}
            currentPage={currentPage}
            onPageChange={onPageChange}
          />
        </div>
      )}
    </>
  );
};
export default PaymentList;