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

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

  return (
    <div>
      {(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="">
        <div className="flex w-full justify-between font-semibold mb-4">
          <div>Expense Type</div>
          <div className="mr-10">Amount</div>
        </div>
        {expense &&
          Object.entries(expense).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;
          })}
        <div className="flex justify-between border-t font-bold my-2">
          <div className="mt-2">Total Expense</div>
          <div className="mt-2">
            {expense?.total && <MoneyFormat amount={expense.total} />}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ExpenseReport;