'use client';
import clsx from 'clsx';
import { useEffect, useState } from 'react';
import { FiArrowRight } from 'react-icons/fi';
import { Button, Heading, Input, OtpInput, Paragraph, showToast, Spinner, } from '../../01-atoms';
import { SetupMfa } from './SetupMfa';
/**
 * LoginForm component for rendering a login form with email and password inputs.
 *
 * @component
 * @example
 * // Example usage of LoginForm component
 * <LoginForm login={yourLoginFunction} callback={yourCallbackFunction} />
 *
 * @param {Object} props - The properties of the LoginForm component.
 * @param {Function} props.login - The function to handle the login process.
 * @param {Function} [props.callback] - Optional callback function to be called after a successful login.
 *
 * @returns {ReactNode} The rendered LoginForm component.
 */
export function LoginForm({ login, callback, needCode = false, lengthCode = 6, setupMfa, }) {
    const [errorMessage, setErrorMessage] = useState();
    const [otpCode, setOtpCode] = useState('');
    const [isPending, setIsPending] = useState(false);
    const [qr, setQr] = useState();
    const [showLogin, setShowLogin] = useState(!needCode);
    useEffect(() => {
        setShowLogin(!needCode);
    }, [needCode]);
    const handlerSubmit = (event) => {
        event.preventDefault();
        setIsPending(true);
        const formData = new FormData(event.currentTarget);
        if (needCode && otpCode) {
            formData.append('otpCode', otpCode);
        }
        login(formData)
            .then((qrImage) => {
            qrImage ? setQr(qrImage) : callback?.();
        })
            .catch((error) => {
            const message = error instanceof Error ? error.message : String(error);
            setErrorMessage(message);
            showToast(message, 'error');
        })
            .finally(() => {
            setIsPending(false);
        });
    };
    const onCancel = () => {
        setQr(undefined);
        setOtpCode('');
        setShowLogin(true);
    };
    const handleSetupMfa = (firstCode, secondCode) => {
        return setupMfa?.(firstCode, secondCode);
    };
    return (<>
      {!qr && (<>
          <Heading level="h4">Bienvenido!</Heading>
          <form onSubmit={handlerSubmit} className="flex w-72 flex-col items-center gap-4">
            {!!showLogin && (<>
                <Input label="Usuario" input={{
                    type: 'email',
                    name: 'username',
                    required: true,
                    autoComplete: 'email',
                    disabled: isPending,
                }}/>
                <Input label="Contraseña" input={{
                    type: 'password',
                    name: 'password',
                    required: true,
                    autoComplete: 'current-password',
                    disabled: isPending,
                }}/>
              </>)}

            {!showLogin && (<OtpInput label="Codigo de Verificación" length={lengthCode} handleSubmit={(otp) => setOtpCode(otp)}/>)}

            <Button type="submit" iconR={<FiArrowRight />} aria-disabled={isPending} disabled={isPending} className="w-full">
              Iniciar sesión
            </Button>
            {!showLogin && (<Button className="w-56" type="button" onClick={onCancel}>
                Volver
              </Button>)}
            {!!errorMessage && (<Paragraph className="text-error text-center" size="chips">
                {errorMessage}
              </Paragraph>)}
            <div className={clsx('self-center', !isPending && 'invisible opacity-0')}>
              <Spinner />
            </div>
          </form>
        </>)}
      {!!qr && (<SetupMfa lengthCode={lengthCode} onCancel={onCancel} qrImage={qr} setupMfa={handleSetupMfa}/>)}
    </>);
}
//# sourceMappingURL=LoginForm.jsx.map