import { useLingui } from '../../../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useState } from 'react';
import { EMAIL_REGEX, convertMagicLinkOptions } from '../../../../../utils/index.mjs';
import { getTranslatedError } from '../../../../../utils/getTranslatedError.mjs';
import { readB2CInternals } from '../../../../../utils/internal.mjs';
import Button from '../../../../components/atoms/Button.mjs';
import Column from '../../../../components/atoms/Column.mjs';
import EmailInput from '../../../../components/molecules/EmailInput.mjs';
import { useEventCallback, useErrorCallback, useGlobalReducer, useStytch, useConfig, AppScreens } from '../../../GlobalContextProvider.mjs';
import { hasProduct } from '../../../utils.mjs';
import { StytchEventType } from '../../../../../../../core/src/public/ui.mjs';
import { EmailSentType } from '../../../../../../../core/src/Events.mjs';

const MagicLinkEmailForm = ()=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const onEvent = useEventCallback();
    const onError = useErrorCallback();
    const [, dispatch] = useGlobalReducer();
    const stytchClient = useStytch();
    const config = useConfig();
    const emailMagicLinksOptions = config.emailMagicLinksOptions;
    const hasPasskeys = hasProduct(config.products, 'passkeys');
    const [email, setEmail] = useState('');
    const [errorMessage, setErrorMessage] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const handleSubmit = async (e)=>{
        e.preventDefault();
        const submittingEmail = email;
        if (!submittingEmail.match(EMAIL_REGEX)) {
            setErrorMessage($__i18n._({
                id: "error.invalidEmail",
                message: "Email format is invalid."
            }));
        } else {
            setErrorMessage('');
            setIsSubmitting(true);
            stytchClient.magicLinks.email.loginOrCreate(submittingEmail, convertMagicLinkOptions(emailMagicLinksOptions)).then((data)=>{
                onEvent({
                    type: StytchEventType.MagicLinkLoginOrCreateEvent,
                    data: {
                        ...data,
                        email: submittingEmail
                    }
                });
                setIsSubmitting(false);
                dispatch({
                    type: 'set_magic_link_email',
                    email: submittingEmail
                });
                dispatch({
                    type: 'transition',
                    screen: AppScreens.EmailConfirmation
                });
                readB2CInternals(stytchClient).networkClient.logEvent({
                    name: 'email_try_again_clicked',
                    details: {
                        email: submittingEmail,
                        type: EmailSentType.LoginOrCreateEML
                    }
                });
            }).catch((e)=>{
                onError(e);
                setIsSubmitting(false);
                setErrorMessage(getTranslatedError(e, $__));
            });
        }
    };
    return /*#__PURE__*/ React__default.createElement(Column, {
        as: "form",
        onSubmit: handleSubmit,
        gap: 4
    }, /*#__PURE__*/ React__default.createElement(EmailInput, {
        email: email,
        setEmail: setEmail,
        hasPasskeys: hasPasskeys,
        hideLabel: true,
        error: errorMessage
    }), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "primary",
        loading: isSubmitting,
        type: "submit"
    }, $__i18n._({
        id: "button.emailLogin",
        message: "Continue with email"
    })));
};

export { MagicLinkEmailForm };
//# sourceMappingURL=MagicLinkForm.mjs.map
