import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default from 'react';
import useSWR from '../../../../../../node_modules/swr/core/dist/index.mjs';
import { getTranslatedError } from '../../../utils/getTranslatedError.mjs';
import Button from '../../components/atoms/Button.mjs';
import Column from '../../components/atoms/Column.mjs';
import { errorToast } from '../../components/atoms/Toast.mjs';
import Typography from '../../components/atoms/Typography.mjs';
import ButtonColumn from '../../components/molecules/ButtonColumn.mjs';
import { LoadingScreen } from '../../components/molecules/Loading.mjs';
import { useStytch, useGlobalReducer, useEventCallback, useErrorCallback } from '../GlobalContextProvider.mjs';
import { AppScreens } from '../types/AppScreens.mjs';
import modules_b00e876f from './TOTPEnrollQRScreen.module.css.mjs';
import { StytchEventType } from '../../../../../core/src/public/ui.mjs';

const TOTPEnrollQRScreen = ()=>{
    const stytchClient = useStytch();
    const [state, dispatch] = useGlobalReducer();
    const onEvent = useEventCallback();
    const onError = useErrorCallback();
    const { i18n: $__i18n, _: $__ } = useLingui();
    // This screen should only be shown if primary info and TOTP enrollment are
    // available
    const { memberId, organizationId } = state.mfa.primaryInfo;
    const { data } = useSWR([
        'stytch.totp.create',
        memberId,
        organizationId
    ], ()=>stytchClient.totp.create({
            member_id: memberId,
            organization_id: organizationId
        }), {
        revalidateOnFocus: false,
        revalidateOnReconnect: false,
        revalidateIfStale: false,
        onSuccess: (response)=>{
            onEvent({
                type: StytchEventType.B2BTOTPCreate,
                data: response
            });
            // Store the enrollment object so we can show recovery code after authenticating
            dispatch({
                type: 'totp/create_success',
                response,
                memberId,
                organizationId
            });
        },
        onError: (error)=>{
            const message = getTranslatedError(error, $__);
            if (message) {
                errorToast({
                    message
                });
            }
            onError(error);
        }
    });
    const handleShowManualCode = ()=>{
        dispatch({
            type: 'totp/show_code',
            method: 'manual'
        });
    };
    const handleContinue = ()=>{
        dispatch({
            type: 'transition',
            history: 'push',
            screen: AppScreens.TOTPEntry
        });
    };
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "header"
    }, $__i18n._({
        id: "totp.setupQr.title",
        message: "Scan the QR code to link your authenticator app"
    })), /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "body"
    }, $__i18n._({
        id: "totp.setupQr.content",
        message: "Your organization requires an additional form of verification to make your account more secure. If you don’t have an authenticator app, you’ll need to install one first."
    })), data ? /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement("img", {
        alt: $__i18n._({
            id: "mfaTotpEnrollment.qrAltText",
            message: "QR code for TOTP enrollment"
        }),
        src: data.qr_code,
        className: modules_b00e876f.qr
    }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, /*#__PURE__*/ React__default.createElement(Button, {
        variant: "primary",
        onClick: handleContinue
    }, $__i18n._({
        id: "button.continue",
        message: "Continue"
    })), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "outline",
        onClick: handleShowManualCode
    }, $__i18n._({
        id: "button.totpQrManual",
        message: "Having trouble scanning?"
    })))) : /*#__PURE__*/ React__default.createElement(LoadingScreen, null));
};

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