import { useLingui } from '../../../../../../../../node_modules/@lingui/react/dist/index.mjs';
import classNames from '../../../../../../../../_virtual/index.mjs';
import React__default from 'react';
import { buttonClassNames } from '../../../../components/atoms/Button.mjs';
import Typography from '../../../../components/atoms/Typography.mjs';
import { useConfig } from '../../../GlobalContextProvider.mjs';
import { PasswordMethods, MagicLinkMethods } from '../../../StytchProduct.mjs';
import { hasProduct, useProductComponents } from '../../../utils.mjs';
import modules_c21c94f2 from './index.module.css.mjs';
import { OTPMethods } from '../../../../../../../core/src/public/ui.mjs';
import { DEV } from '../../../../../../../core/src/utils/dev.mjs';
import { Root as Root2, List, Trigger, Content } from '../../../../../../../../node_modules/@radix-ui/react-tabs/dist/index.mjs';

const OTPTabHeaders = {
    [OTPMethods.SMS]: {
        id: "tab.text",
        message: "Text"
    },
    [OTPMethods.WhatsApp]: {
        id: "tab.whatsapp",
        message: "WhatsApp"
    },
    [OTPMethods.Email]: {
        id: "tab.email",
        message: "Email"
    },
    [MagicLinkMethods.Email]: {
        id: "tab.email",
        message: "Email"
    },
    [PasswordMethods.Email]: {
        id: "tab.email",
        message: "Email"
    }
};
const getTabMethods = (products, otpMethods)=>{
    const hasPassword = hasProduct(products, 'passwords');
    const tabMethods = new Set();
    for (const { id } of products){
        if (id === 'emailMagicLinks') {
            tabMethods.add(hasPassword ? PasswordMethods.Email : MagicLinkMethods.Email);
        } else if (id === 'passwords') {
            tabMethods.add(PasswordMethods.Email);
        } else if (id === 'otp') {
            for (const method of otpMethods){
                tabMethods.add(method === OTPMethods.Email && hasPassword ? PasswordMethods.Email : method);
            }
        }
    }
    return Array.from(tabMethods);
};
const LoginForm = ()=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const { otpOptions, products } = useConfig();
    const productsIncludesOtp = hasProduct(products, 'otp');
    const otpMethods = productsIncludesOtp ? otpOptions?.methods ?? [] : [];
    const hasEmailMagicLink = hasProduct(products, 'emailMagicLinks');
    const hasOTPEmail = productsIncludesOtp && otpMethods.includes(OTPMethods.Email);
    const tabMethods = getTabMethods(products, otpMethods);
    const tabMethodComponents = useProductComponents(products, 'tabs');
    if (hasEmailMagicLink && hasOTPEmail) return /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "helper",
        color: "destructive"
    }, DEV('Error: Cannot use both EML and Email OTP'));
    return /*#__PURE__*/ React__default.createElement(Root2, {
        defaultValue: tabMethods[0]
    }, tabMethods.length > 1 && /*#__PURE__*/ React__default.createElement(List, {
        className: modules_c21c94f2.tabRow,
        "aria-label": $__i18n._({
            id: "tab.listLabel",
            message: "Select login method"
        })
    }, tabMethods.map((method)=>/*#__PURE__*/ React__default.createElement(Trigger, {
            value: method,
            key: method,
            className: classNames(buttonClassNames({
                variant: 'outline',
                block: true
            }), modules_c21c94f2.tab)
        }, $__i18n._(OTPTabHeaders[method])))), tabMethods.map((method)=>{
        const Component = tabMethodComponents[method];
        if (tabMethods.length > 1) {
            return(// We override tabIndex here because each tab will have some interactive element
            // > It is recommended that all tabpanel elements in a tab set are focusable if there are any panels in
            // > the set that contain content where the first element in the panel is not focusable.
            // - From: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/#accessibilityfeatures
            /*#__PURE__*/ React__default.createElement(Content, {
                value: method,
                key: method,
                tabIndex: -1
            }, /*#__PURE__*/ React__default.createElement(Component, null)));
        } else {
            return /*#__PURE__*/ React__default.createElement(Component, {
                key: method
            });
        }
    }));
};

export { LoginForm, OTPTabHeaders, getTabMethods };
//# sourceMappingURL=index.mjs.map
