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.pending !== 64
                        ? ((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;