import {Box, Grid, Typography} from "@mui/material";
import RadialBarSemiCircularChart from "@/components/dashboard/reports/LoanDetails/RadialBarSemiCircularChart";
import {useTranslations} from "next-intl"; // Make sure to import React if it's not already imported

const ReferredCharts = ({reportList}) => {
    const t = useTranslations();
    const DataItemsName = [
        {id: "referred_loans_to_bank", name: t("reports.referred_loans_to_bank")},
        {id: "paid_loans", name: t("reports.paid_loans")}
    ];

    return (
        <Grid container sx={{width: "100%", mt: 3}}>
            {Object.entries(reportList).map(([entryKey, innerObject]) => {
                const ItemName = DataItemsName.find(item => item.id === entryKey).name;
                return (
                    <Grid key={entryKey} item xs={12} xl={6}
                          sx={{display: "flex", flexDirection: "column", alignItems: "center"}}>
                        <Box sx={{mb: 2}}>
                            <Typography sx={{
                                fontSize: "1.3rem",
                                fontWeight: "600",
                                color: "primary.main"
                            }}>{ItemName}</Typography>
                        </Box>
                        <Grid container sx={{width: "100%"}}>
                            {innerObject.map((item, index) => {
                                let percentage = item.total_amount !== 0 ? item.total_amount / innerObject.total_budget * 100 : 0;
                                return (
                                    <Grid key={index} item xs={12} md={6} sx={{textAlign: "center"}}>
                                        <Box>
                                            <Typography sx={{
                                                fontSize: "1.1rem",
                                                fontWeight: "600",
                                                color: "#8c8c8c"
                                            }}>{item.vehicle_type}</Typography>
                                            <Typography variant="caption">
                                                {t("reports.dynamic_total_budget", {
                                                    total_budget: (item.total_budget / 1000000).toLocaleString("en"),
                                                })}
                                            </Typography>
                                        </Box>
                                        <RadialBarSemiCircularChart data={Math.round(percentage)}
                                                                    formatter={(val) => `${val}%`}
                                                                    label={t("reports.dynamic_label_referred", {
                                                                        count: (item.count).toLocaleString("en"),
                                                                        total_amount: (item.total_amount / 1000000).toLocaleString("en")
                                                                    })}/>
                                    </Grid>
                                );
                            })}
                        </Grid>
                    </Grid>
                );
            })}
        </Grid>
    );
};

export default ReferredCharts;