import { Divider, Grid, Paper, Stack, Typography } from "@mui/material";
import { useTranslations } from "next-intl";
import Filter from "../Filter";
import useChart from "@/lib/app/hooks/useChart";
import {
    GET_LOAN_EXPERTPROGRESS_BANK_REPORT,
    GET_LOAN_EXPERTPROGRESS_CARTABLE,
    GET_LOAN_EXPERTPROGRESS_PLANING_COUNCIL,
} from "@/core/data/apiRoutes";
import LoadingHardPage from "@/core/components/LoadingHardPage";
import AnalyticsIcon from "@mui/icons-material/Analytics";
import FunctionalityCharts from "./FunctionalityCharts";

const LoanDetails = () => {
    const t = useTranslations();

    const {
        errorReportList: errorReportList1,
        isLoadingReportList: isLoadingReportList1,
        reportList: reportList1,
        setFilterOption: setFilterOption1,
        mutate: mutate1,
    } = useChart(GET_LOAN_EXPERTPROGRESS_CARTABLE);
    const {
        errorReportList: errorReportList2,
        isLoadingReportList: isLoadingReportList2,
        reportList: reportList2,
        setFilterOption: setFilterOption2,
        mutate: mutate2,
    } = useChart(GET_LOAN_EXPERTPROGRESS_PLANING_COUNCIL);
    const {
        errorReportList: errorReportList3,
        isLoadingReportList: isLoadingReportList3,
        reportList: reportList3,
        setFilterOption: setFilterOption3,
        mutate: mutate3,
    } = useChart(GET_LOAN_EXPERTPROGRESS_BANK_REPORT);

    return (
        <Paper elevation={2} sx={{ width: "95%", mx: "auto", my: 2, pb: 2, background: "#f7f7f7e6" }}>
            <Filter
                title={t("reports.loan_details")}
                filterItem={[{ type: "province", type_fa: "استان", multiple: false }]}
                setFilterOption={(fields) => {
                    setFilterOption1(fields);
                    setFilterOption2(fields);
                    setFilterOption3(fields);
                }}
                isLoadingReportList={isLoadingReportList1 || isLoadingReportList3 || isLoadingReportList2}
                mutate={() => {
                    mutate1();
                    mutate2();
                    mutate3();
                }}
            />
            <Grid container sx={{ justifyContent: { xs: "center", position: "relative" } }}>
                {isLoadingReportList1 || isLoadingReportList2 || isLoadingReportList3 ? (
                    <Grid item xs={12} sx={{ aspectRatio: "3/0.95" }}>
                        <LoadingHardPage
                            icon={<AnalyticsIcon sx={{ width: "inherit", height: "inherit" }} />}
                            loading={isLoadingReportList1 || isLoadingReportList2 || isLoadingReportList3}
                            label={t("reports.loading_fetching_reports")}
                            width={100}
                            height={100}
                            sx={{ position: "absolute", bgcolor: "#f7f7f7e6" }}
                        />
                    </Grid>
                ) : errorReportList1 || errorReportList2 || errorReportList3 ? (
                    <Grid
                        item
                        xs={12}
                        sx={{ aspectRatio: "3/0.95", display: "flex", justifyContent: "center", alignItems: "center" }}
                    >
                        <Typography
                            variant="h6"
                            sx={{
                                color: "#858585",
                                letterSpacing: "0.1rem",
                            }}
                        >
                            {t("reports.error_fetching_reports")}
                        </Typography>
                    </Grid>
                ) : (
                    <Stack sx={{ width: "100%" }}>
                        <FunctionalityCharts reportList={reportList1.bus} name={t("reports.bus")} />
                        <Divider />
                        <FunctionalityCharts reportList={reportList1.minibus} name={t("reports.minibus")} />
                        <Divider />
                        <FunctionalityCharts reportList={reportList2.bus} name={t("reports.planing_council_bus")} />
                        <Divider />
                        <FunctionalityCharts
                            reportList={reportList2.minibus}
                            name={t("reports.planing_council_minibus")}
                        />
                        <Divider />
                        <FunctionalityCharts reportList={reportList3.bus} name={t("reports.bank_report_bus")} />
                        <Divider />
                        <FunctionalityCharts reportList={reportList3.minibus} name={t("reports.bank_report_minibus")} />
                    </Stack>
                )}
            </Grid>
        </Paper>
    );
};

export default LoanDetails;