import getData from "@/utils/fetch";
import { useQuery } from "@tanstack/react-query";
import { FC, useEffect } from "react";
import MoneyFormat from "../common/money";
import Spinner from "../spinner";

type props = {
  filterValue?: string;
};

const InvoiceReport: FC<props> = ({ filterValue }) => {
  let url = `/api/v1/invoice-type`;
  if (filterValue) {
    url = `${url}?${filterValue}`;
  }
  const getInvoiceType = async () => {
    const { data } = await getData(url);
    return data;
  };
  const {
    data: invoices,
    isLoading,
    isFetching,
    refetch,
  } = useQuery({
    queryKey: ["invoice-type"],
    queryFn: () => getInvoiceType(),
    retry: 0,
  });

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

  return (
    <div className="w-full">
      {(isLoading || isFetching) && (
        <div className="relative">
          <div className="grid fixed left-2/4 top-1/2 z-50">
            <Spinner size="md" color="purple" />
          </div>
        </div>
      )}
      <div className="w-full">
        <div className="flex w-full justify-between font-semibold mb-4">
          <div>Income Type</div>
          <div className="mr-10">Amount</div>
        </div>
        {invoices &&
          Object.entries(invoices).map(([key, value]) => {
            if (key !== "total") {
              return (
                <div key={key} className="flex justify-between  rounded">
                  <div className="capitalize">{key?.split("_").join(" ")}</div>
                  <div>
                    <MoneyFormat amount={value as number} />
                  </div>
                </div>
              );
            }
            return null;
          })}
        <hr className="py-2 mt-2 block" />
        <div className="flex w-full justify-between font-bold">
          <div>Total Income</div>
          <div>
            <div>
              <MoneyFormat amount={invoices?.total} />{" "}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default InvoiceReport;