import { Box, Grid, Typography } from "@mui/material";
import RadialBarSemiCircularChart from "./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_budget !== 0 ? (item.total_amount / item.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 > 100 ? 100 : percentage)}
                                            formatter={(val) => `${Math.round(percentage)}%`}
                                            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;