import {Grid, Paper, Typography} from "@mui/material";
import BarChart from "./BarChart";
import Filter from "../Filter";
import {useTranslations} from "next-intl";
import useChart from "@/lib/app/hooks/useChart";
import {GET_PROVINCE_PROGRESS} from "@/core/data/apiRoutes";
import LoadingHardPage from "@/core/components/LoadingHardPage";
import AnalyticsIcon from '@mui/icons-material/Analytics';

const LoanProgress = () => {
    const t = useTranslations();
    const {errorReportList, isLoadingReportList, reportList, setFilterOption, mutate} = useChart(GET_PROVINCE_PROGRESS);
    return (
        <Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, pb: 2, background: "#f7f7f7e6"}}>
            <Filter title={t("reports.loan_progress")}
                    filterItem={[
                        {type: "year", type_fa: "سال", multiple: false}
                    ]}
                    setFilterOption={setFilterOption}
                    isLoadingReportList={isLoadingReportList}
                    mutate={mutate}
            />
            <Grid container>
                {isLoadingReportList ? (
                    <Grid item xs={12}
                          sx={{
                              display: "flex",
                              justifyContent: "center",
                              alignItems: "center",
                              aspectRatio: {xs: "1/1", sm: "1/1", md: "1/0.4", xl: "1/0.3", position: "relative"}
                          }}>
                        <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={{
                              display: "flex",
                              justifyContent: "center",
                              alignItems: "center",
                              aspectRatio: {xs: "1/1", sm: "1/1", md: "1/0.4", xl: "1/0.3", position: "relative"}
                          }}>
                        <Typography variant="h6" sx={{
                            color: "#858585",
                            letterSpacing: "0.1rem"
                        }}>{t("reports.error_fetching_reports")}</Typography>
                    </Grid>
                ) : (
                    <Grid item xs={12}
                          sx={{
                              aspectRatio: {xs: "1/1", sm: "1/1", md: "1/0.4", xl: "1/0.3", position: "relative"}
                          }}>
                        <BarChart data={reportList}/>
                    </Grid>
                )}
            </Grid>
        </Paper>
    )
};

export default LoanProgress;