import { Button, Stack, ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
import { useTranslations } from "next-intl";
import { CenterLayout } from "@witel/webapp-builder";
import { useState } from "react";
import DoneIcon from "@mui/icons-material/Done";
import { NextLinkComposed } from "@witel/webapp-builder/dist/utils/linkRouting";
import SvgDone from "@/core/components/svgs/SvgDone";
import RealPersonForm from "@/components/dashboard/navgan/add-request-loan/forms/RealPersonForm";
import LegalPersonForm from "@/components/dashboard/navgan/add-request-loan/forms/LegalPersonForm";
import CheckRules from "@/components/dashboard/navgan/add-request-loan/forms/CheckRules";

const AddFormComponent = () => {
    const t = useTranslations();
    const [finishLoanRequest, setFinishLoanRequest] = useState(false);
    const [personType, setPersonType] = useState("real");
    const [rulesChecked, setRulesChecked] = useState(false);

    return (
        <>
            {!rulesChecked ? (
                <CheckRules rulesChecked={rulesChecked} setRulesChecked={setRulesChecked} />
            ) : finishLoanRequest ? (
                <CenterLayout>
                    <SvgDone width={200} height={200} />
                    <Stack direction={"row"} spacing={0.7} sx={{ mb: 4 }}>
                        <Typography variant={"h5"} align={"center"}>
                            {t("LoanRequest.finish_loan_request")}
                        </Typography>
                        <DoneIcon color={"success"} />
                    </Stack>
                    <Button variant={"contained"} component={NextLinkComposed} to={"/dashboard/navgan/followUp-loan"}>
                        {t("LoanRequest.back_to_dashboard")}
                    </Button>
                </CenterLayout>
            ) : (
                <>
                    <Stack sx={{ width: "100%", my: 3 }} justifyContent={"center"} alignItems={"center"}>
                        <ToggleButtonGroup
                            color="primary"
                            value={personType}
                            exclusive
                            onChange={(e, value) => {
                                if (value === null) return;
                                setPersonType(value);
                            }}
                        >
                            <ToggleButton value="real">{t("LoanRequest.real_person")}</ToggleButton>
                            <ToggleButton value="legal">{t("LoanRequest.legal_person")}</ToggleButton>
                        </ToggleButtonGroup>
                    </Stack>
                    {personType === "real" ? (
                        <RealPersonForm setFinishLoanRequest={setFinishLoanRequest} />
                    ) : (
                        <LegalPersonForm setFinishLoanRequest={setFinishLoanRequest} />
                    )}
                </>
            )}
        </>
    );
};
export default AddFormComponent;