import FullPageLayout from "@/layouts/FullPageLayout";
import CenterLayout from "@/layouts/CenterLayout";
import {Box, Divider, Stack, Typography} from "@mui/material";
import {useEffect, useState} from "react";
import useRequest from "@/lib/app/hooks/useRequest";

const DashboardFirstComponent = () => {
    const requestServer = useRequest({auth: true, notification: false});
    const [data, setData] = useState(null);

    useEffect(() => {
        requestServer(`${process.env.NEXT_PUBLIC_BASE_URL}/dashboard/reports/navgan/statistics`, "get")
            .then((res) => {
                setData(res.data.data);
            })
            .catch(() => {
            });
    }, []);

    if (!data) return "";

    return (<>
            <FullPageLayout>
                <CenterLayout>
                    <Box sx={{width: 600}}>
                        <Divider>وام های واجد شرایط</Divider>
                        <Stack
                            sx={{py: 2, px: 1}}
                            direction={"row"}
                            alignItems={"center"}
                            justifyContent={"space-between"}
                        >
                            <Typography>تعداد کل</Typography>
                            <Typography variant={"h5"}>
                                {Number(data.totalApprovedLoans).toLocaleString("en")}
                            </Typography>
                        </Stack>
                        <Divider sx={{mt: 2}}>وام های پیشنهادی</Divider>
                        <Stack
                            sx={{py: 2, px: 1}}
                            direction={"row"}
                            alignItems={"center"}
                            justifyContent={"space-between"}
                        >
                            <Typography>تعداد کل</Typography>
                            <Typography variant={"h5"}>
                                {Number(data.proposedCount).toLocaleString("en")}
                            </Typography>
                        </Stack>
                        <Stack
                            sx={{py: 2, px: 1}}
                            direction={"row"}
                            alignItems={"center"}
                            justifyContent={"space-between"}
                        >
                            <Typography>مبلغ کل (میلیون ریال)</Typography>
                            <Typography variant={"h5"}>
                                {Number(data.totalProposedAmount / 1000000).toLocaleString("en")}
                            </Typography>
                        </Stack>
                        <Divider sx={{mt: 2}}>وام های تصویب شده</Divider>
                        <Stack
                            sx={{py: 2, px: 1}}
                            direction={"row"}
                            alignItems={"center"}
                            justifyContent={"space-between"}
                        >
                            <Typography>تعداد کل</Typography>
                            <Typography variant={"h5"}>
                                {Number(data.approvedCount).toLocaleString("en")}
                            </Typography>
                        </Stack>
                        <Stack
                            sx={{py: 2, px: 1}}
                            direction={"row"}
                            alignItems={"center"}
                            justifyContent={"space-between"}
                        >
                            <Typography>مبلغ کل (میلیون ریال)</Typography>
                            <Typography variant={"h5"}>
                                {Number(data.totalApprovedAmount / 1000000).toLocaleString("en")}
                            </Typography>
                        </Stack>
                    </Box>
                </CenterLayout>
            </FullPageLayout>
        </>);
};

export default DashboardFirstComponent;