import { Button, Heading, OtpInput, Paragraph, Spinner, } from '../../../01-atoms';
import { useState } from 'react';
import clsx from 'clsx';
export function StepThree({ previousCode, previousStep, nextStep, onCancel, submit, lengthCode = 4, }) {
    const [secondCode, setSecondCode] = useState('');
    const [errorMessage, setErrorMessage] = useState('');
    const [isPending, setIsPending] = useState(false);
    const handleSubmit = async () => {
        setIsPending(true);
        submit?.(previousCode, secondCode)
            ?.then(() => {
            nextStep();
        })
            ?.catch((error) => {
            setErrorMessage(error);
        })
            ?.finally(() => {
            setIsPending(false);
        });
    };
    return (<div className="col-1 flex w-72 flex-col items-center">
      <Heading className="mb-4" level="h7">
        Configurar autenticación
      </Heading>

      <Paragraph className="my-4" size="body-2">
        Espera a que cambie el código e ingresa el siguiente
      </Paragraph>

      <div className="bg-lavender-1 my-4 flex flex-col items-center rounded-lg p-4">
        <Paragraph size="body-2">Código anterior</Paragraph>
        <Paragraph size="subtitle-1" className="text-lavender mt-2 text-center tracking-[0.2rem]">
          {previousCode}
        </Paragraph>
      </div>

      <OtpInput label="Codigo de Verificación 2" length={lengthCode} handleSubmit={setSecondCode} error={errorMessage}/>

      <Button disabled={secondCode?.length < lengthCode || isPending} modifier="principal" className="my-2 w-full" onClick={handleSubmit} aria-disabled={isPending}>
        Verificar y Completar
      </Button>

      <div className="flex items-center gap-4">
        <Button modifier="second" className="min-w-40" onClick={onCancel}>
          Cancelar
        </Button>

        <Button modifier="second" className="min-w-40" onClick={previousStep}>
          Atrás
        </Button>
      </div>

      <div className={clsx('mt-4 self-center', !isPending && 'invisible opacity-0')}>
        <Spinner />
      </div>
    </div>);
}
//# sourceMappingURL=StepThree.jsx.map