import { useState } from 'react';
import { StepOne } from './StepOne';
import { StepTwo } from './StepTwo';
import { StepThree } from './StepThree';
import { StepFour } from './StepFour';
export function SetupMfa({ qrImage, onCancel, setupMfa, lengthCode = 6, }) {
    const [currentStep, setCurrentStep] = useState(1);
    const [firstCode, setFirstCode] = useState('');
    const handleNextWithCode = (code) => {
        if (code)
            setFirstCode(code);
        setCurrentStep((prev) => prev + 1);
    };
    const handlePreviousStep = () => {
        setCurrentStep((prev) => prev - 1);
    };
    const handleCancel = () => {
        setCurrentStep(1);
        setFirstCode('');
        onCancel();
    };
    const handleSubmit = (firstCode, secondCode) => {
        return setupMfa?.(firstCode, secondCode);
    };
    const renderStep = () => {
        switch (currentStep) {
            case 1:
                return (<StepOne qrImage={qrImage} nextStep={handleNextWithCode} onCancel={handleCancel}/>);
            case 2:
                return (<StepTwo onCancel={handleCancel} nextStep={handleNextWithCode} previousStep={handlePreviousStep}/>);
            case 3:
                return (<StepThree previousCode={firstCode} previousStep={handlePreviousStep} nextStep={handleNextWithCode} submit={handleSubmit} lengthCode={lengthCode} onCancel={handleCancel}/>);
            case 4:
                return <StepFour onFinish={handleCancel}/>;
            default:
                return (<StepOne qrImage={qrImage} nextStep={handleNextWithCode} onCancel={handleCancel}/>);
        }
    };
    return <>{renderStep()}</>;
}
//# sourceMappingURL=index.jsx.map