import DashboardLayouts from "@/layouts/dashboardLayouts";
import {
    Grid,
    Stack,
} from "@mui/material";
import {useEffect, useState} from "react";
import {SHOW_LOAN_REQUEST_WELFARE} from "@/core/data/apiRoutes";
import useLoading from "@/lib/app/hooks/useLoading";
import useRequest from "@/lib/app/hooks/useRequest";
import moment from "jalali-moment";
import RequestCard from "@/components/dashboard/refahi/followUp-loan/RequestCard";

const LoanFollowUpComponent = () => {
    const requestServer = useRequest();
    const {setLoadingPage} = useLoading();
    const [requestsList, setRequestsList] = useState([]);
    // get form data
    useEffect(() => {
        setLoadingPage(true)
        requestServer(SHOW_LOAN_REQUEST_WELFARE, "get", {auth: true, notification: false})
            .then(function ({data}) {
                const items = data.data;
                const formattedData = items.map((item, index) => ({
                    id: item.id,
                    latest_history_created_at: moment(item.latest_history_created_at).locale("fa").format("HH:mm | YYYY/MM/DD"),
                    state_id: item.state_id,
                    loan_state: item.loan_state,
                }));
                setRequestsList(formattedData);
                setLoadingPage(false)
            })
            .catch(function (error) {
            })
    }, []);

    return (
        <DashboardLayouts>
            <Stack
                spacing={2}
                sx={{
                    p: 4,
                    width: "100%",
                }}
            >
                <Grid
                    container
                    columnSpacing={2}
                    rowSpacing={2}
                    sx={{alignItems: "start", justifyContent: "center"}}
                >
                    {requestsList.map((item, index) => (
                        <RequestCard item={item} key={item.id}/>
                    ))}
                </Grid>
            </Stack>
        </DashboardLayouts>
    );
};

export default LoanFollowUpComponent;
