"use client";

import React, { useMemo } from "react";
import SearchBox, { Criterion } from "../SearchBox";
import { useTranslation } from "react-i18next";
import { ProjectResult } from "@/app/api/projects";
import { ProjectPandLReportFilter } from "@/app/api/reports";
import { fetchProjectPandLReport } from "@/app/api/reports/actions";
import { downloadFile } from "@/app/utils/commonUtil";
import { dateTypeCombo } from "@/app/utils/comboUtil";
import { FormHelperText } from "@mui/material";
import { errorDialog, errorDialogWithContent } from "../Swal/CustomAlerts";
import { TeamResult } from "@/app/api/team";
import { SessionStaff } from "@/config/authConfig";
import GenerateProjectPandLReportLoading from "./GenerateProjectPandLReportLoading";

interface Props {
    projects: ProjectResult[];
}

interface SubComponents {
    // Loading: typeof GenerateProjectPandLReportLoading;
}



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

const GenerateProjectPandLReport: React.FC<Props> & SubComponents = ({ projects }) => {
    const { t } = useTranslation("report");
    const projectCombo = projects.map(project => ({
        label: `${project.code} - ${project.name}`,
        value: project.id
    }))

    const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
        () => [
            { label: t("Project *"), paramName: "project", type: "autocomplete", options: projectCombo, needAll: false},
            { label: t("Start Month *"), label2: t("End Month *"), paramName: "startMonth", type: "dateRange", needMonth: true },

        ],
        [t],
    );

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

    return (
        <>
            {/* {loading && <GenerateProjectPandLReport.Loading />} */}
            {/* {!loading && */}
                <SearchBox
                criteria={searchCriteria}
                onSearch={async (query) => {
                    // setLoading(true);
                    if (query.project && query.project !== "All") {
                        if (query.project && query.startMonth && query.startMonthTo) {
                            try {
                                const response = await fetchProjectPandLReport({
                                    projectId: parseFloat(query.project),
                                    startMonth: query.startMonth,
                                    endMonth: query.startMonthTo
                                });
                                if (response) {
                                    downloadFile(new Uint8Array(response.blobValue), response.filename);
                                }
                            } catch (error) {
                                errorDialogWithContent(t("Download Fail"), t("Please try it later"), t)
                                    // .then(() => {
                                    //     window.location.reload();
                                    // });
                            }
                        } else {
                            errorDialogWithContent(t("Download Fail"), t("Please check the required field"), t)
                                // .then(() => {
                                //     window.location.reload();
                                // });
                        }
                    }
                    // setLoading(false);
                }}
                formType={"download"}
            />
            {/* } */}
        </>
    );
};

// GenerateProjectPandLReport.Loading = GenerateProjectPandLReportLoading;

export default GenerateProjectPandLReport;