//src\components\LateStartReportGen\LateStartReportGen.tsx
"use client";
import React, { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { LateStart } from "@/app/api/report";
//import { DownloadReportButton } from './DownloadReportButton';
// import axios from 'axios';
import { apiPath } from '../../../auth/utils';
import { fetchTeamCombo } from "@/app/api/team/actions";
import SearchBox, { Criterion } from "@/components/SearchBox";
import { combo, comboProp } from "@/app/api/team";
import { Customer } from "@/app/api/customer";
import { downloadFile } from "@/app/utils/commonUtil";
import { fetchLateStartReport } from "@/app/api/reports/actions";
import { LateStartReportRequest } from "@/app/api/reports";
//import { GET_QC_CATEGORY_COMBO } from 'utils/ApiPathConst';
interface Props {
  projects: LateStart[];
  customers: Customer[];
}
type SearchQuery = Partial<Omit<LateStartReportRequest, "id">>;
type SearchParamNames = keyof SearchQuery;

const ProgressByClientSearch: React.FC<Props> = ({ projects, customers }) => {
  //console.log(customers)
  const { t } = useTranslation("projects");
  const [teamCombo, setteamCombo] = useState<comboProp[]>([])
  const [isLoading, setIsLoading] = useState(true)

  const getTeamCombo = async() => {
    try {
      const response = await fetchTeamCombo()
      console.log(response.records)
      setteamCombo(response.records)
      setIsLoading(false)
    } catch (err) {
      console.log(err)
    }
  }

  useEffect(() => {
    getTeamCombo()
  }, [])

  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
    () => [
      { label: "Team", paramName: "teamId", type: "select", options: teamCombo.map(team => team.label) },
      { label: "Client", paramName: "clientId", type: "select", options: customers.map(customer => `${customer.code}-${customer.name}`) },
      {
        label: "Remained Date From",
        label2: "Remained Date To",
        paramName: "remainedDate",
        type: "dateRange",
      },
    ],
    [t, teamCombo, customers],
  );

  return (
    <>
      {!isLoading && <SearchBox
        criteria={searchCriteria}
        onSearch={async (query) => {
          console.log(query);

          try {
            // const teamId = teamCombo.find(team => team.label === query.teamId)?.id!!
            // const clientId = customers.find(customer => `${customer.code}-${customer.name}` === query.clientId)?.id!!
            const teamId = teamCombo.find(team => team.label === query.teamId)?.id || 0;
            const clientId = customers.find(customer => `${customer.code}-${customer.name}` === query.clientId)?.id || 0;
            const remainedDate = query.remainedDate || "1900-01-01";
            const remainedDateTo = query.remainedDateTo || "2100-12-31";

            const fileResponse = await fetchLateStartReport({teamId: teamId, clientId: clientId, remainedDate: remainedDate, remainedDateTo: remainedDateTo});
            if (fileResponse) {
              downloadFile(new Uint8Array(fileResponse.blobValue), fileResponse.filename!!)
          }
          } catch (err) {
            console.log(err)
          }
          //console.log(teamCombo.find(team => team.label === query.team)?.id);
        }}
      />}
      {/* <DownloadReportButton /> */}
    </>
  );
};

export default ProgressByClientSearch;
