"use client";
import React, { useMemo } from "react";
import SearchBox, { Criterion } from "../SearchBox";
import { useTranslation } from "react-i18next";
import { ProjectResult } from "@/app/api/projects";
import { fetchMonthlyWorkHoursReport, fetchProjectCashFlowReport } from "@/app/api/reports/actions";
import { downloadFile } from "@/app/utils/commonUtil";
import { BASE_API_URL } from "@/config/api";
import { MonthlyWorkHoursReportFilter } from "@/app/api/reports";
import { records } from "@/app/api/staff/actions";
import { StaffResult } from "@/app/api/staff";

interface Props {
    staffs: StaffResult[]
}

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

const GenerateMonthlyWorkHoursReport: React.FC<Props> = ({ staffs }) => {
    const { t } = useTranslation();
    const staffCombo = staffs.map(staff => `${staff.name} - ${staff.staffId}`)
    console.log(staffs)

    const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
        () => [
            { label: t("Staff"), 
            paramName: "staff", 
            type: "select", 
            options: staffCombo, 
            needAll: false},
        ],
        [t],
    );

return (
    <>
    <SearchBox
        criteria={searchCriteria}
        onSearch={async (query: any) => {
            if (query.staff.length > 0 && query.staff.toLocaleLowerCase() !== "all") {
                const index = staffCombo.findIndex(staff => staff === query.staff)
                const response = await fetchMonthlyWorkHoursReport({ id: staffs[index].id, yearMonth: "2023-03" })
                if (response) {
                    downloadFile(new Uint8Array(response.blobValue), response.filename!!)
                }
            }
        }
    }
    />
</>
    )
}

export default GenerateMonthlyWorkHoursReport