import React, {ReactNode, useState} from 'react';
import "../createdua.scss";
import StepAfmForm from "./StepAfmForm";
import {checkAfmForDua} from "../../../../API/dua";
import StepDuaActive from "./StepDuaActive";
import StepNoContract from "./StepNoContract";
import StepContractFound from "./StepContractFound";
import useLoading from "../../../../hooks/useLoading";
import DuaActivateBanner from "../../../../assets/images/activate_dua_banner.svg";
import StepRequestExists from "./StepRequestExists";

type CreationDuaProps = {
    children?: ReactNode
}

const AfmForm = ({children}: CreationDuaProps) => {

    const [step, setStep] = useState<'afm' | 'no_contract' | 'contract_found' | 'dua_active' | 'request_exists'>('afm')
    const [loading, setIsLoading] = useLoading(true);
    const [email, setEmail] = useState('')
    const [submittedAfm, setSubmittedAfm] = useState<string>('')
    /**  afm step handler  */
    const handleAfmSubmit = async (afm: string) => {

        try {
            setIsLoading(true)
            const res = await checkAfmForDua(afm)
            setStep(res.data.step)
            setSubmittedAfm(afm)
            setEmail(res.data.email)
        } catch (e) {

        }
        finally {
            setIsLoading(false)
        }

    }

    return (
        <div id={'createdua'}>
            <div className="main-content f">
                {/* step: afm - first step - user have to insert 4 last digits of afm*/}

                {step === 'afm' && <StepAfmForm
                    onSubmit={handleAfmSubmit}
                    loading={loading}
                ></StepAfmForm>}

                {step === 'dua_active' && <StepDuaActive></StepDuaActive>}

                {step === 'no_contract' && <StepNoContract
                    afm={submittedAfm}></StepNoContract>}

                {step === 'contract_found' &&
                    <StepContractFound
                        afm={submittedAfm}
                        email={email}

                    ></StepContractFound>}

                {step === 'request_exists' && <StepRequestExists></StepRequestExists>}

            </div>

            <div className="banner">
                <img src={DuaActivateBanner} alt="DuaActivateBanner"/>
            </div>
        </div>
    );
}

export default AfmForm;