import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useState, useEffect } from 'react';
import { isTruthy } from '../../../../utils/isTruthy.mjs';
import Column from '../../../components/atoms/Column.mjs';
import Typography from '../../../components/atoms/Typography.mjs';
import Divider from '../../../components/molecules/Divider.mjs';
import ErrorText from '../../../components/molecules/ErrorText.mjs';
import { usePresentation } from '../../../components/PresentationConfig.mjs';
import { usePromptPasskey } from '../../../hooks/usePromptPasskey.mjs';
import { useStytch, useConfig } from '../../GlobalContextProvider.mjs';
import { hasProduct, useProductComponents } from '../../utils.mjs';

const MainScreen = ()=>{
    const stytchClient = useStytch();
    const config = useConfig();
    const { options } = usePresentation();
    const { i18n: $__i18n, _: $__ } = useLingui();
    const [mainScreenGroups, setMainScreenGroups] = useState([]);
    const { products, oauthOptions } = config;
    const hasButtons = hasProduct(products, 'oauth') && oauthOptions || hasProduct(products, 'crypto');
    const hasPasskeys = hasProduct(products, 'passkeys');
    const hasInput = hasProduct(products, 'emailMagicLinks') || hasProduct(products, 'otp') || hasProduct(products, 'passwords');
    const [startPasskeyAuth, passkeyError] = usePromptPasskey({
        canAutofill: hasInput,
        shadowDOM: Boolean(options.enableShadowDOM)
    });
    const productComponents = useProductComponents(products, 'mainScreen');
    useEffect(()=>{
        const loadProductComponents = async ()=>{
            // Deduplicate components mapped from products
            const keys = Array.from(new Set(products.map((product)=>{
                switch(product.id){
                    case 'oauth':
                    case 'crypto':
                        return product.id;
                    case 'emailMagicLinks':
                    case 'otp':
                    case 'passwords':
                        return 'login-form';
                }
            }).filter(isTruthy)));
            const showDivider = hasButtons && hasInput;
            if (keys.length > 1 && showDivider) {
                keys.splice(-1, 0, 'divider');
            }
            // Add a passkey button if the user has configured passkeys, don't have a login form,
            // or the browser does not support autofill
            if (hasPasskeys && (!hasInput || !await stytchClient.webauthn.browserSupportsAutofill())) {
                keys.unshift('passkey-button');
            }
            // Group Wallet and Oauth buttons (basically going from [Password, Wallet, OAuth] to [Password, [Wallet, OAuth]])
            // This reassignment is only there to make TS happy - .splice mutates, and groups === keys
            // so it is not really needed
            const groups = keys;
            const walletIndex = keys.indexOf('crypto');
            const oauthIndex = keys.indexOf('oauth');
            if (walletIndex !== -1 && oauthIndex !== -1 && Math.abs(walletIndex - oauthIndex) === 1) {
                const index = Math.min(walletIndex, oauthIndex);
                groups.splice(index, 0, keys.splice(index, 2));
            }
            setMainScreenGroups(groups);
        };
        loadProductComponents();
    // eslint-disable-next-line react-hooks/exhaustive-deps -- SDK-1354
    }, []);
    if (hasPasskeys && products.length === 1) return /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "helper",
        color: "destructive"
    }, (void 0));
    const props = {
        startPasskeyAuth
    };
    const renderComponent = (key, index)=>{
        if (Array.isArray(key)) {
            return /*#__PURE__*/ React__default.createElement(Column, {
                gap: 2,
                key: index
            }, key.map(renderComponent));
        }
        if (key === 'divider') {
            return /*#__PURE__*/ React__default.createElement(Divider, {
                key: index
            });
        }
        const Component = productComponents[key];
        return /*#__PURE__*/ React__default.createElement(Component, {
            key: key,
            ...props
        });
    };
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6
    }, !options.hideHeaderText && /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "header",
        align: "center"
    }, $__i18n._({
        id: "login.title",
        message: "Sign up or log in"
    })), passkeyError && /*#__PURE__*/ React__default.createElement(ErrorText, null, passkeyError), mainScreenGroups.map(renderComponent));
};

export { MainScreen };
//# sourceMappingURL=index.mjs.map
