import {Grid, Paper, Typography} from "@mui/material";
import PolarChart from "./PolarChart";
import Pie from "./PieChart";
import {useTranslations} from "next-intl";
import Filter from "@/components/dashboard/old-reports/Filter";
import useChart from "@/lib/app/hooks/useChart";
import {GET_LOAN_DISTRIBUTION} from "@/core/data/apiRoutes";
import LoadingHardPage from "@/core/components/LoadingHardPage";
import AnalyticsIcon from "@mui/icons-material/Analytics";

const LoanDistribution = () => {
    const t = useTranslations();
    const {errorReportList, isLoadingReportList, reportList, setFilterOption, mutate} = useChart(GET_LOAN_DISTRIBUTION);
    return (
        <Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, pb: 2, background: "#f7f7f7e6"}}>
            <Filter title={t("reports.loan_distribution")}
                    filterItem={[
                        {type: "province", type_fa: "استان", multiple: true},
                        {type: "year", type_fa: "سال", multiple: false}
                    ]}
                    setFilterOption={setFilterOption}
                    isLoadingReportList={isLoadingReportList}
                    mutate={mutate}
            />
            <Grid container sx={{justifyContent: {xs: "center", md: "space-between", position: "relative"}}}>
                {isLoadingReportList ? (
                    <Grid item xs={12} sx={{aspectRatio: "3/0.95"}}>
                        <LoadingHardPage
                            icon={<AnalyticsIcon sx={{width: "inherit", height: "inherit"}}/>}
                            loading={isLoadingReportList}
                            label={t("reports.loading_fetching_reports")}
                            width={100}
                            height={100}
                            sx={{position: "absolute", bgcolor: "#f7f7f7e6"}}
                        />
                    </Grid>
                ) : errorReportList ? (
                    <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>
                ) : (
                    <>
                        <Grid item xs={12} sm={10} md={6} xl={5} sx={{aspectRatio: "1/0.75"}}>
                            <PolarChart data={reportList}/>
                        </Grid>
                        <Grid item xs={12} sm={10} md={6} xl={5} sx={{aspectRatio: "1/0.75"}}>
                            <Pie data={reportList}/>
                        </Grid>
                    </>
                )}
            </Grid>
        </Paper>
    )
};

export default LoanDistribution;