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 Typography from '../../components/atoms/Typography.mjs';
import ButtonColumn from '../../components/molecules/ButtonColumn.mjs';
import { getEnabledMethods } from '../getEnabledMethods.mjs';
import { useConfig, useGlobalReducer } from '../GlobalContextProvider.mjs';
import { B2B_MFA_METHODS } from '../reducer/mfa.mjs';
import { AppScreens } from '../types/AppScreens.mjs';
import { B2BMFAProducts } from '../../../../../core/src/public/b2b/ui.mjs';

const mfaOptions = {
    [B2BMFAProducts.totp]: {
        messageDescriptor: {
            id: "mfa.enrollment.option.totp",
            message: "Use an authenticator app"
        },
        screen: AppScreens.TOTPEnrollmentQRCode
    },
    [B2BMFAProducts.smsOtp]: {
        messageDescriptor: {
            id: "mfa.enrollment.option.sms",
            message: "Text me a code"
        },
        screen: AppScreens.SMSOTPEnrollment
    }
};
const MFAEnrollmentSelectionScreen = ()=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const { mfaProductInclude, mfaProductOrder } = useConfig();
    const [state, dispatch] = useGlobalReducer();
    // This screen should only be shown if primary info is available
    const { organizationMfaOptionsSupported } = state.mfa.primaryInfo;
    const handleNavigate = (screen)=>{
        dispatch({
            type: 'transition',
            screen,
            history: 'push'
        });
    };
    const displayOptions = useMemo(()=>{
        const optionsToDisplay = getEnabledMethods({
            allMethods: B2B_MFA_METHODS,
            orgSupportedMethods: organizationMfaOptionsSupported,
            uiIncludedMethods: mfaProductInclude
        });
        const result = [];
        for (const option of mfaProductOrder ?? B2B_MFA_METHODS){
            if (optionsToDisplay.has(option)) {
                result.push(option);
                optionsToDisplay.delete(option);
            }
        }
        result.push(...optionsToDisplay);
        return result;
    }, [
        mfaProductInclude,
        mfaProductOrder,
        organizationMfaOptionsSupported
    ]);
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "header"
    }, $__i18n._({
        id: "mfa.enrollment.title",
        message: "Set up Multi-Factor Authentication"
    })), /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "body"
    }, $__i18n._({
        id: "mfa.enrollment.content",
        message: "Your organization requires an additional form of verification to make your account more secure."
    })), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, displayOptions.map((option)=>{
        const { messageDescriptor, screen } = mfaOptions[option];
        return /*#__PURE__*/ React__default.createElement(Button, {
            key: option,
            variant: "outline",
            onClick: ()=>handleNavigate(screen)
        }, $__i18n._(messageDescriptor));
    })));
};

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