import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useMemo } from 'react';
import Button from '../../components/atoms/Button.mjs';
import Column from '../../components/atoms/Column.mjs';
import ButtonColumn from '../../components/molecules/ButtonColumn.mjs';
import OTPEntry from '../../components/molecules/OTPEntry.mjs';
import { useStytch, useConfig, useGlobalReducer } from '../GlobalContextProvider.mjs';
import { AppScreens } from '../types/AppScreens.mjs';
import { useMutate } from '../utils.mjs';
import { B2BMFAProducts } from '../../../../../core/src/public/b2b/ui.mjs';

const TOTPEntryScreen = ()=>{
    const stytchClient = useStytch();
    const { sessionOptions: { sessionDurationMinutes } } = useConfig();
    const { i18n: $__i18n, _: $__ } = useLingui();
    const [state, dispatch] = useGlobalReducer();
    const { mfa: { isEnrolling } } = state;
    // This screen should only be shown if primary info is available
    const { enrolledMfaMethods, memberId, organizationId, organizationMfaOptionsSupported } = state.mfa.primaryInfo;
    const { trigger: authenticate, isMutating: isSubmitting, error: authenticateError } = useMutate('stytch.totp.authenticate', (_, { arg: { memberId, organizationId, otp, sessionDurationMinutes } })=>stytchClient.totp.authenticate({
            code: otp,
            member_id: memberId,
            organization_id: organizationId,
            session_duration_minutes: sessionDurationMinutes
        }), {
        onSuccess: ()=>{
            dispatch({
                type: 'totp/authenticate_success'
            });
        }
    });
    const isSmsOtpAvailable = useMemo(()=>!isEnrolling && enrolledMfaMethods.includes(B2BMFAProducts.smsOtp) && (organizationMfaOptionsSupported.length === 0 || organizationMfaOptionsSupported.includes(B2BMFAProducts.smsOtp)), [
        enrolledMfaMethods,
        isEnrolling,
        organizationMfaOptionsSupported
    ]);
    const errorMessage = authenticateError ? $__i18n._({
        id: "error.passcodeInvalid",
        message: "Invalid passcode, please try again."
    }) : undefined;
    const canGoBack = isEnrolling;
    const handleSubmit = (otp)=>authenticate({
            memberId,
            organizationId,
            otp,
            sessionDurationMinutes
        });
    const handleSwitchToRecoveryCode = ()=>{
        dispatch({
            type: 'transition',
            history: 'push',
            screen: AppScreens.RecoveryCodeEntry
        });
    };
    const handleSwitchToSms = ()=>{
        dispatch({
            type: 'transition',
            history: 'push',
            screen: AppScreens.SMSOTPEntry
        });
    };
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6
    }, /*#__PURE__*/ React__default.createElement(OTPEntry, {
        header: $__i18n._({
            id: "totp.title",
            message: "Enter verification code"
        }),
        instruction: $__i18n._({
            id: "totp.content",
            message: "Enter the 6-digit code from your authenticator app."
        }),
        helperContent: isEnrolling ? $__i18n._({
            id: "mfa.totpEntry.getNewCode",
            message: "If the verification code doesn’t work, go back to your authenticator app to get a new code."
        }) : null,
        isSubmitting: isSubmitting,
        onSubmit: handleSubmit,
        errorMessage: errorMessage
    }), /*#__PURE__*/ React__default.createElement(ButtonColumn, {
        top: null,
        bottom: /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, isSmsOtpAvailable && /*#__PURE__*/ React__default.createElement(Button, {
            variant: "outline",
            onClick: handleSwitchToSms
        }, $__i18n._({
            id: "mfa.totpEntry.switchToSms",
            message: "Text me a code instead"
        })), !isEnrolling && /*#__PURE__*/ React__default.createElement(Button, {
            variant: "outline",
            onClick: handleSwitchToRecoveryCode
        }, $__i18n._({
            id: "mfa.totpEntry.useBackupCode",
            message: "Use a backup code"
        })), canGoBack && /*#__PURE__*/ React__default.createElement(Button, {
            variant: "ghost",
            onClick: ()=>dispatch({
                    type: 'navigate_back'
                })
        }, $__i18n._({
            id: "button.goBack",
            message: "Go back"
        })))
    }));
};

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