import {Grid, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import RadialBarSemiCircularChart from "@/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart";

const FunctionalityCharts = ({reportList}) => {
    const t = useTranslations();
    const DataItemsName = [
        {id: "expert", name: t("reports.expert")},
        {id: "transportation_assistant", name: t("reports.transportation_assistant")},
        {id: "province_manager", name: t("reports.province_manager")},
        {id: "bank", name: t("reports.bank")}
    ]
    return (
        <Grid container sx={{width: "100%"}}>
            {
                Object.entries(reportList).map(([entryKey, innerObject]) => {
                    let percentage = innerObject.total !== 0 ? (innerObject.total - innerObject.pending) / innerObject.total * 100 : 0;
                    const ItemName = DataItemsName.find(item => item.id === entryKey).name;
                    return (
                        <Grid key={entryKey} item xs={12} sm={10} md={6} xl={3}
                              sx={{textAlign: "center"}}>
                            <Typography sx={{
                                fontSize: "1.3rem",
                                fontWeight: "600",
                                color: "primary.main"
                            }}>{ItemName}</Typography>
                            <RadialBarSemiCircularChart data={Math.round(percentage)}
                                                        formatter={(val) => `${val}%`}
                                                        label={t("reports.dynamic_label_functionality", {
                                                            total: (innerObject.total).toLocaleString("en"),
                                                            done: (innerObject.total - innerObject.pending).toLocaleString("en")
                                                        })}/>
                        </Grid>
                    )
                })
            }
        </Grid>
    )
};

export default FunctionalityCharts;
