import UpdateForm from "@/components/dashboard/navgan/show/form/UpdateForm";
import {useEffect, useState} from "react";
import {GET_LOAN_DETAILS} from "@/core/data/apiRoutes";
import {useRouter} from "next/router";
import {SvgLoading, useRequest} from "@witel/webapp-builder";
import {Stack, Typography} from "@mui/material";
import {useTranslations} from "next-intl";

const ShowLoanForm = () => {
    const t = useTranslations();
    const {query} = useRouter();
    const requestServer = useRequest({auth: true, notification: false});
    const [LoanDetails, setLoanDetails] = useState({});

    useEffect(() => {
        requestServer(GET_LOAN_DETAILS + query.id, 'get', {auth: true, notification: false}).then(({data}) => {
            setLoanDetails(data.data);
        }).catch(() => {
        })
    }, []);

    if (Object.keys(LoanDetails).length === 0) {
        return (
            <Stack sx={{alignItems: "center", justifyContent: "center"}} spacing={3}>
                <SvgLoading height={150} width={150}/>
                <Typography>{t("ShowLoan.loading_show_component")}</Typography>
            </Stack>
        );
    }
    return (
        <UpdateForm LoanDetails={LoanDetails} LoanId={query.id}/>
    );
};

export default ShowLoanForm;
