import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useState, useMemo } from 'react';
import { debounce, noop, 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 EmailInput from '../../../components/molecules/EmailInput.mjs';
import { getNewPasswordProps, PasswordError } from '../../../components/molecules/PasswordError.mjs';
import { PasswordInput } from '../../../components/molecules/PasswordInput.mjs';
import { useStytch, useConfig, useGlobalReducer, useEventCallback, useErrorCallback, AppScreens } from '../../GlobalContextProvider.mjs';
import { useBootstrap } from '../../utils.mjs';
import { DEFAULT_SESSION_DURATION_MINUTES } from '../../../../../../core/src/constants.mjs';
import { StytchEventType } from '../../../../../../core/src/public/ui.mjs';

const PasswordNewUser = ()=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const stytchClient = useStytch();
    const { bootstrap } = useBootstrap();
    const config = useConfig();
    const passwordOptions = config.passwordOptions;
    const [state, dispatch] = useGlobalReducer();
    const onEvent = useEventCallback();
    const onError = useErrorCallback();
    const email = state.formState.passwordState.email;
    const [password, setPassword] = useState('');
    const [errorMessage, setErrorMessage] = useState('');
    const [passwordError, setPasswordError] = useState({
        policy: 'notLoaded'
    });
    const [isSubmitting, setIsSubmitting] = useState(false);
    const updateStrengthCheck = useMemo(()=>debounce((email, password)=>{
            setErrorMessage('');
            stytchClient.passwords.strengthCheck({
                email,
                password
            }).then(({ score, feedback, valid_password, strength_policy, breached_password })=>{
                const common = {
                    passwordInvalid: !valid_password,
                    isPasswordBreached: breached_password
                };
                if (strength_policy === 'zxcvbn') {
                    setPasswordError({
                        policy: strength_policy,
                        ...common,
                        passwordScore: score,
                        passwordWarning: feedback.warning,
                        passwordSuggestions: feedback.suggestions
                    });
                } else if (strength_policy === 'luds') {
                    setPasswordError({
                        policy: strength_policy,
                        ...common,
                        missingCharacters: feedback.luds_requirements.missing_characters,
                        missingComplexity: feedback.luds_requirements.missing_complexity
                    });
                }
            }).catch((e)=>{
                setErrorMessage(getTranslatedError(e, $__));
            });
        }), [
        stytchClient.passwords,
        $__
    ]);
    const onPasswordChange = (password)=>{
        setPassword(password);
        updateStrengthCheck(email, password);
    };
    const handleSubmit = (e)=>{
        e.preventDefault();
        setErrorMessage('');
        setIsSubmitting(true);
        stytchClient.passwords.create({
            email,
            password,
            session_duration_minutes: config.sessionOptions?.sessionDurationMinutes ?? DEFAULT_SESSION_DURATION_MINUTES
        }).then((data)=>{
            setIsSubmitting(false);
            onEvent({
                type: StytchEventType.PasswordCreate,
                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 passwordInputProps = getNewPasswordProps(bootstrap, passwordError.policy);
    return /*#__PURE__*/ React__default.createElement(Column, {
        as: "form",
        onSubmit: handleSubmit,
        gap: 4
    }, /*#__PURE__*/ React__default.createElement(EmailInput, {
        email: email,
        setEmail: noop,
        disabled: true
    }), /*#__PURE__*/ React__default.createElement(PasswordInput, {
        password: password,
        setPassword: onPasswordChange,
        error: errorMessage,
        ...passwordInputProps
    }), /*#__PURE__*/ React__default.createElement(PasswordError, {
        bootstrap: bootstrap,
        ...passwordError
    }), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "primary",
        loading: isSubmitting,
        type: "submit",
        disabled: passwordError.policy === 'notLoaded' || passwordError.passwordInvalid
    }, $__i18n._({
        id: "button.continue",
        message: "Continue"
    })));
};

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