import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useState } from 'react';
import Button from '../../components/atoms/Button.mjs';
import Column from '../../components/atoms/Column.mjs';
import Typography from '../../components/atoms/Typography.mjs';
import ButtonColumn from '../../components/molecules/ButtonColumn.mjs';
import Input from '../../components/molecules/Input.mjs';
import { useStytch, useConfig, useGlobalReducer } from '../GlobalContextProvider.mjs';
import { useMutate } from '../utils.mjs';
import modules_6bfdbc37 from './RecoveryCodeEntryScreen.module.css.mjs';

const RecoveryCodeEntryScreen = ()=>{
    const stytchClient = useStytch();
    const { sessionOptions: { sessionDurationMinutes } } = useConfig();
    const { i18n: $__i18n, _: $__ } = useLingui();
    const [state, dispatch] = useGlobalReducer();
    // This screen should only be shown if primary info is available
    const { memberId, organizationId } = state.mfa.primaryInfo;
    const { trigger: authenticate, isMutating: isSubmitting, error } = useMutate('stytch.recoveryCodes.recover', (_, { arg: { recoveryCode, memberId, organizationId, sessionDurationMinutes } })=>stytchClient.recoveryCodes.recover({
            recovery_code: recoveryCode,
            member_id: memberId,
            organization_id: organizationId,
            session_duration_minutes: sessionDurationMinutes
        }), {
        throwOnError: false,
        onSuccess: ()=>{
            dispatch({
                type: 'recovery_code/authenticate_success'
            });
        }
    });
    const [recoveryCode, setRecoveryCode] = useState('');
    const errorMessage = error ? $__i18n._({
        id: "recoveryCodes.entry.error.invalidCode",
        message: "Invalid backup code, please try again."
    }) : undefined;
    const handleSubmit = async (e)=>{
        e.preventDefault();
        authenticate({
            recoveryCode,
            memberId,
            organizationId,
            sessionDurationMinutes
        });
    };
    return /*#__PURE__*/ React__default.createElement(Column, {
        as: "form",
        gap: 6,
        onSubmit: handleSubmit
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "header"
    }, $__i18n._({
        id: "recoveryCodes.entry.title",
        message: "Enter backup code"
    })), /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "body"
    }, $__i18n._({
        id: "recoveryCodes.entry.content",
        message: "Enter one of the backup codes you saved when setting up your authenticator app."
    })), /*#__PURE__*/ React__default.createElement(Input, {
        id: "recovery-code",
        className: modules_6bfdbc37.input,
        value: recoveryCode,
        onChange: (e)=>{
            setRecoveryCode(e.target.value);
        },
        placeholder: $__i18n._({
            id: "formField.backupCode.placeholder",
            message: "Enter backup code"
        }),
        label: $__i18n._({
            id: "formField.backupCode.ariaLabel",
            message: "Backup code"
        }),
        hideLabel: true,
        required: true,
        autoComplete: "off",
        spellCheck: false,
        error: errorMessage
    }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, /*#__PURE__*/ React__default.createElement(Button, {
        variant: "primary",
        loading: isSubmitting,
        type: "submit",
        disabled: !recoveryCode || isSubmitting
    }, $__i18n._({
        id: "button.continue",
        message: "Continue"
    })), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "ghost",
        onClick: ()=>dispatch({
                type: 'navigate_back'
            })
    }, $__i18n._({
        id: "button.goBack",
        message: "Go back"
    }))));
};

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