"use client";

import React, { useCallback, useMemo, useState } from "react";
import SearchBox, { Criterion } from "../SearchBox";
import { useTranslation } from "react-i18next";
import SearchResults, { Column } from "../SearchResults";
import EditNote from "@mui/icons-material/EditNote";
import { InvoiceResult } from "@/app/api/invoices";
import { useRouter } from "next/navigation";

interface Props {
  invoices: InvoiceResult[];
}

type SearchQuery = Partial<Omit<InvoiceResult, "id">>;
type SearchParamNames = keyof SearchQuery;

const InvoiceSearch: React.FC<Props> = ({ invoices }) => {
  const { t } = useTranslation("invoices");
  const router = useRouter();

  const [filteredInvoices, setFilteredInvoices] = useState(invoices);

  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
    () => [
      { label: t("Project code"), paramName: "projectCode", type: "text" },
      { label: t("Project name"), paramName: "projectName", type: "text" },
      // { label: t("Stage"), paramName: "stage", type: "text" },
      { 
        label: t("Coming payment milestone from"), 
        label2: t("Coming payment milestone to"), 
        paramName: "comingPaymentMileStone", 
        type: "dateRange" 
      },
      { 
        label: t("Payment date from"), 
        label2: t("Payment date to"), 
        paramName: "paymentMilestoneDate", 
        type: "dateRange" 
      },
      // { label: t("Resource utilization %"), paramName: "resourceUsage", type: "text" },
      // { label: t("Unbilled hours"), paramName: "unbilledHours", type: "text" },
      // { label: t("Reminder to issue invoice"), paramName: "reminder", type: "text" },
    ],
    [t, invoices],
  );

  const onReset = useCallback(() => {
    setFilteredInvoices(invoices);
  }, [invoices]);

  const onProjectClick = useCallback((project: InvoiceResult) => {
    console.log(project);
    router.push(`/invoice/new?id=${project.id}`)
  }, [router, t]);

  const columns = useMemo<Column<InvoiceResult>[]>(
    () => [
      {
        name: "id",
        label: t("Details"),
        onClick: onProjectClick,
        buttonIcon: <EditNote />,
      },
      { name: "projectCode", label: t("Project code") },
      { name: "projectName", label: t("Project name") },
      { name: "stage", label: t("Stage") },
      { name: "comingPaymentMileStone", label: t("Coming payment milestone") },
      { name: "paymentMilestoneDate", label: t("Payment date") },
      { name: "resourceUsage", label: t("Resource utilization %") },
      { name: "unbilledHours", label: t("Unbilled hours") },
      { name: "reminder", label: t("Reminder to issue invoice") },
    ],
    [t, onProjectClick],
  );

  return (
    <>
      <SearchBox
        criteria={searchCriteria}
        onSearch={(query) => {
          console.log(query)
          setFilteredInvoices(
            invoices.filter(
              (d) =>
                d.projectCode.toLowerCase().includes(query.projectCode.toLowerCase()) &&
                d.projectName.toLowerCase().includes(query.projectName.toLowerCase()) &&
                {/*(query.client === "All" || p.client === query.client) &&
                (query.category === "All" || p.category === query.category) &&
                (query.team === "All" || p.team === query.team), **/}
            ),
          );
        }}
        onReset={onReset}
      />
      <SearchResults<InvoiceResult>
        items={filteredInvoices}
        columns={columns}
      />
    </>
  );
};

export default InvoiceSearch;
