//src\components\LateStartReportGen\LateStartReportGen.tsx
"use client";
import React, { useMemo, useState } from "react";
import SearchBox, { Criterion } from "../ReportSearchBox4";
import { useTranslation } from "react-i18next";
import { CostandExpense } from "@/app/api/report4";
import { CostandExpenseReportGenLoading } from "./CostandExpenseReportGenLoading"

interface Props {
  projects: CostandExpense[];
}

interface SubComponents{
  Loading: typeof CostandExpenseReportGenLoading
}

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

const CostandExpenseReportGen: React.FC<Props> & SubComponents = ({ projects }) => {
  const { t } = useTranslation("projects");

  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
    () => [
      { label: "Team", paramName: "team", type: "select", options: ["AAA", "BBB", "CCC"] },
      { label: "Client", paramName: "client", type: "select", options: ["Cust A", "Cust B", "Cust C"] },
      { label: "Remaining Percentage", paramName: "remainPercent", type: "select", options: ["<50%", "50%-70%", ">70%"] },
      // {
      //   label: "Status",
      //   label2: "Remained Date To", 
      //   paramName: "targetEndDate",
      //   type: "dateRange",
      // },
    ],
    [t],
  );

  const [loading, setLoading] = React.useState(false);

  return (
    <>
    {loading && <CostandExpenseReportGen.Loading />}
    {!loading &&
      <SearchBox
        criteria={searchCriteria}
        onSearch={(query) => {
          setLoading(true)
          // console.log(query);
        }}
      />}
      {/* <DownloadReportButton /> */}
    </>
  );
};

CostandExpenseReportGen.Loading = CostandExpenseReportGenLoading

export default CostandExpenseReportGen;
