import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useState } from 'react';
import { convertPasswordResetOptions } from '../../../../utils/index.mjs';
import { getTranslatedError } from '../../../../utils/getTranslatedError.mjs';
import Button from '../../../components/atoms/Button.mjs';
import Column from '../../../components/atoms/Column.mjs';
import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
import EmailInput from '../../../components/molecules/EmailInput.mjs';
import { PasswordInput } from '../../../components/molecules/PasswordInput.mjs';
import { useStytch, useConfig, useGlobalReducer, useEventCallback, useErrorCallback, AppScreens } from '../../GlobalContextProvider.mjs';
import { DEFAULT_SESSION_DURATION_MINUTES } from '../../../../../../core/src/constants.mjs';
import { StytchEventType } from '../../../../../../core/src/public/ui.mjs';

const PasswordAuthenticate = ()=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const stytchClient = useStytch();
    const config = useConfig();
    const passwordOptions = config.passwordOptions;
    const [state, dispatch] = useGlobalReducer();
    const onEvent = useEventCallback();
    const onError = useErrorCallback();
    const [email, setEmail] = useState(state.formState.passwordState.email);
    const [password, setPassword] = useState('');
    const [errorMessage, setErrorMessage] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const handleSubmit = (e)=>{
        e.preventDefault();
        setErrorMessage('');
        setIsSubmitting(true);
        stytchClient.passwords.authenticate({
            email,
            password,
            session_duration_minutes: config.sessionOptions?.sessionDurationMinutes ?? DEFAULT_SESSION_DURATION_MINUTES
        }).then((data)=>{
            setIsSubmitting(false);
            onEvent({
                type: StytchEventType.PasswordAuthenticate,
                data
            });
            dispatch({
                type: 'transition',
                screen: AppScreens.PasswordConfirmation
            });
        }).catch((e)=>{
            onError(e);
            if (e.error_type === 'reset_password') {
                stytchClient.passwords.resetByEmailStart(convertPasswordResetOptions(email, passwordOptions)).then(()=>{
                    dispatch({
                        type: 'transition',
                        screen: AppScreens.PasswordDedupe
                    });
                });
            } else {
                setErrorMessage(getTranslatedError(e, $__));
            }
            setIsSubmitting(false);
        });
    };
    const onForgot = ()=>{
        stytchClient.passwords.resetByEmailStart(convertPasswordResetOptions(email, passwordOptions)).then(()=>{
            dispatch({
                type: 'transition',
                screen: AppScreens.PasswordForgot
            });
        });
    };
    return /*#__PURE__*/ React__default.createElement(Column, {
        as: "form",
        onSubmit: handleSubmit,
        gap: 4
    }, /*#__PURE__*/ React__default.createElement(EmailInput, {
        email: email,
        setEmail: setEmail,
        disabled: true
    }), /*#__PURE__*/ React__default.createElement(PasswordInput, {
        password: password,
        setPassword: setPassword,
        type: "current",
        error: errorMessage
    }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, /*#__PURE__*/ React__default.createElement(Button, {
        variant: "primary",
        loading: isSubmitting,
        type: "submit"
    }, $__i18n._({
        id: "button.continue",
        message: "Continue"
    })), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "outline",
        onClick: onForgot
    }, $__i18n._({
        id: "button.forgotPassword",
        message: "Forgot your password?"
    }))));
};

export { PasswordAuthenticate };
//# sourceMappingURL=PasswordAuthenticate.mjs.map
