import {
    Step,
    StepLabel,
} from '@sofaltaeu/sofaltaeu-components'
import {  useState } from 'react';
import { FormDadosPessoais, FormDadosAdicionais, FormLogin, FormPrivacidade } from './Steps'
import { useSwitchFormContext, FormEnum } from '../../context/switchForm';
import { useSocialTokenContext } from '../../context/socialToken';
import Animation from '../Animation'
import success from '../../../public/success.json'
import { CreateAccount, CreatePreConta } from '../../interfaces/services/ICreateUser';
import { useMutation } from 'react-query';
import { createAccount } from '../../services';
import { NewCreateAccountProps, newCreateAccount } from '../../utils/createAccount';
import { Stepper } from './styled';

interface RegisterFormProps {
    dominioSFE: string
    preConta?: NewCreateAccountProps
}

export const RegisterForm = ({ dominioSFE, preConta }:RegisterFormProps) => {
    const { handleFormSwitch } = useSwitchFormContext()
    const { getPayload } = useSocialTokenContext()
    const initialStep = preConta ? 2 : 0
    const [activeStep, setActiveStep] = useState(initialStep)

    const initialState = preConta ? preConta : getPayload()
    const [state, setState] = useState<CreateAccount>(newCreateAccount(initialState))
    const steps = ['Dados Pessoais', 'Dados Adicionais', 'Login', 'Privacidade']
    const mutationRegister = useMutation((body:CreateAccount | CreatePreConta)=>createAccount({apiUrl:dominioSFE, body}),{
        onSuccess:()=>{
            setActiveStep(4)
            setTimeout(() => {
                handleFormSwitch(FormEnum.login)
            }, 3000);
        }
    })

    const nextSetp = () => {
        setActiveStep((activeStep)=>activeStep + 1);
    }

    const prevSetp = () => {
        setActiveStep((activeStep)=>activeStep - 1);
    }

    const renderSteps = () => {
        return steps.map((label) => (
            <Step key={label}>
                <StepLabel >{label}</StepLabel>
            </Step>
        ));
    }

    const submitForm = () =>{
        let form: CreateAccount | CreatePreConta = state

        if(preConta){
            form = {
                usuario: state.usuario,
                senha: state.senha,
                isMarketing: state.isMarketing,
                isMarkentingEmail: state.isMarkentingEmail,
                isMarkentingTelefone: state.isMarkentingTelefone,
                email: state.email
            }
        }

        mutationRegister.mutate(form)
    }

    const renderFormByStep = () => {
        switch (activeStep) {
            case 1:
                return (
                    <FormDadosAdicionais
                        state={state}
                        nextSetp={nextSetp}
                        setState={setState}
                        prevSetp={prevSetp}
                        dominioSFE={dominioSFE}
                    />
                )
            case 2:
                return (
                    <FormLogin
                        state={state}
                        nextSetp={nextSetp}
                        setState={setState}
                        prevSetp={prevSetp}
                        dominioSFE={dominioSFE}
                        preconta={preConta !== undefined}
                    />
				);
            case 3:
                return (
                    <FormPrivacidade
                        state={state}
                        nextSetp={submitForm}
                        setState={setState}
                        prevSetp={prevSetp}
                        dominioSFE={dominioSFE}
                        isLoading={mutationRegister.isLoading}
                    />
                )
            case 4:
                return (
                    <Animation
                        json={success}
                        text='Conta criada com sucesso! Você será redirecionado!'
                        maxWidth={250}
                    />
                )
            default:
                return (
                    <FormDadosPessoais
                        state={state}
                        nextSetp={nextSetp}
                        prevSetp={()=>handleFormSwitch(FormEnum.login)}
                        setState={setState}
                        dominioSFE={dominioSFE}
                    />
                )
        }
    }

	return (
		<>
            {activeStep !== 4 &&
                <Stepper activeStep={activeStep} alternativeLabel>
                    {renderSteps()}
                </Stepper>
            }
            {renderFormByStep()}

		</>
	);
}

export default RegisterForm