import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useMemo } from 'react';
import { getTranslatedError } from '../../../utils/getTranslatedError.mjs';
import { isTruthy } from '../../../utils/isTruthy.mjs';
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 ErrorText from '../../components/molecules/ErrorText.mjs';
import { useGlobalReducer } from '../GlobalContextProvider.mjs';
import { useEffectiveAuthConfig } from '../hooks/useEffectiveAuthConfig.mjs';
import { useEmailOtpDiscoverySend } from '../hooks/useEmailOtpDiscoverySend.mjs';
import { useEmailOtpLoginOrSignup } from '../hooks/useEmailOtpLoginOrSignup.mjs';
import { useEmlDiscoverySend } from '../hooks/useEmlDiscoverySend.mjs';
import { useEmlLoginOrSignup } from '../hooks/useEmlLoginOrSignup.mjs';
import { AuthFlowType } from '../../../../../core/src/public/b2b/ui.mjs';

const options = {
    emailMagicLinks: {
        messageDescriptor: {
            id: "emailMethodSelection.link",
            message: "Email me a login link"
        }
    },
    emailOtp: {
        messageDescriptor: {
            id: "emailMethodSelection.code",
            message: "Email me a login code"
        }
    }
};
const EmailMethodSelectionScreen = ()=>{
    const { products } = useEffectiveAuthConfig();
    const { i18n: $__i18n, _: $__ } = useLingui();
    const [state, dispatch] = useGlobalReducer();
    const { trigger: sendDiscoveryEml, isMutating: isSendingDiscoveryEml, error: sendDiscoveryEmlError, reset: resetSendDiscoveryEml } = useEmlDiscoverySend();
    const { trigger: sendDiscoveryOtp, isMutating: isSendingDiscoveryOtp, error: sendDiscoveryOtpError, reset: resetSendDiscoveryOtp } = useEmailOtpDiscoverySend();
    const { trigger: sendLoginOrSignupEml, isMutating: isSendingLoginOrSignupEml, error: sendLoginOrSignupEmlError, reset: resetSendLoginOrSignupEml } = useEmlLoginOrSignup();
    const { trigger: sendLoginOrSignupOtp, isMutating: isSendingLoginOrSignupOtp, error: sendLoginOrSignupOtpError, reset: resetSendLoginOrSignupOtp } = useEmailOtpLoginOrSignup();
    const isSending = isSendingDiscoveryEml || isSendingDiscoveryOtp || isSendingLoginOrSignupEml || isSendingLoginOrSignupOtp;
    const error = sendDiscoveryEmlError || sendDiscoveryOtpError || sendLoginOrSignupEmlError || sendLoginOrSignupOtpError;
    const handleChooseMethod = (method)=>{
        resetSendDiscoveryEml();
        resetSendDiscoveryOtp();
        resetSendLoginOrSignupEml();
        resetSendLoginOrSignupOtp();
        switch(method){
            case 'emailMagicLinks':
                if (state.flowState.type === AuthFlowType.Discovery) {
                    sendDiscoveryEml({
                        email: state.formState.emailState.userSuppliedEmail
                    });
                } else if (state.flowState.type === AuthFlowType.Organization && state.flowState.organization) {
                    sendLoginOrSignupEml({
                        email: state.formState.emailState.userSuppliedEmail,
                        organization_id: state.flowState.organization.organization_id
                    });
                }
                break;
            case 'emailOtp':
                if (state.flowState.type === AuthFlowType.Discovery) {
                    sendDiscoveryOtp({
                        email: state.formState.emailState.userSuppliedEmail
                    });
                } else if (state.flowState.type === AuthFlowType.Organization && state.flowState.organization) {
                    sendLoginOrSignupOtp({
                        email: state.formState.emailState.userSuppliedEmail,
                        organization_id: state.flowState.organization.organization_id
                    });
                }
                break;
        }
    };
    const displayOptions = useMemo(()=>products.map((product)=>{
            const option = options[product.id];
            if (!option) return;
            return {
                option: product.id,
                messageDescriptor: option.messageDescriptor
            };
        }).filter(isTruthy), [
        products
    ]);
    const handleBack = ()=>{
        dispatch({
            type: 'navigate_back'
        });
    };
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "header"
    }, $__i18n._({
        id: "emailMethodSelection.title",
        message: "Select how you’d like to continue"
    })), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, displayOptions.map(({ option, messageDescriptor })=>/*#__PURE__*/ React__default.createElement(Button, {
            key: option,
            variant: "outline",
            disabled: isSending,
            onClick: ()=>{
                handleChooseMethod(option);
            }
        }, $__i18n._(messageDescriptor))), error && /*#__PURE__*/ React__default.createElement(ErrorText, null, getTranslatedError(error, $__)), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "ghost",
        onClick: handleBack
    }, $__i18n._({
        id: "button.goBack",
        message: "Go back"
    }))));
};

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