import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useState, useEffect } from 'react';
import { SAFARI_CROSS_DEVICE_DUPLICATE_REG_ERROR_MESSAGE, CHROME_CROSS_DEVICE_DUPLICATE_REG_ERROR_MESSAGE } from '../../../../utils/passkeys.mjs';
import Button from '../../../components/atoms/Button.mjs';
import Column from '../../../components/atoms/Column.mjs';
import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
import ErrorText from '../../../components/molecules/ErrorText.mjs';
import { LoadingScreen } from '../../../components/molecules/Loading.mjs';
import TextColumn from '../../../components/molecules/TextColumn.mjs';
import { useStytch, useConfig, useEventCallback, useErrorCallback, useGlobalReducer, AppScreens } from '../../GlobalContextProvider.mjs';
import { DEFAULT_SESSION_DURATION_MINUTES } from '../../../../../../core/src/constants.mjs';
import { StytchEventType } from '../../../../../../core/src/public/ui.mjs';

const PasskeyRegistrationStart = ()=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const stytchClient = useStytch();
    const [userState, setUserState] = useState(()=>// We'll optimistically say if the user has a cached session then they are logged in, otherwise we try loading first
        stytchClient.user.getSync() != null ? 'hasUser' : 'loading');
    const [error, setError] = useState();
    const config = useConfig();
    const onEvent = useEventCallback();
    const onError = useErrorCallback();
    useEffect(()=>{
        stytchClient.user.get().then(()=>{
            setUserState('hasUser');
        }).catch((e)=>{
            setUserState('noUser');
            onError(e);
        });
    }, [
        onError,
        stytchClient
    ]);
    const [, dispatch] = useGlobalReducer();
    const onCreatePasskey = ()=>{
        setError(undefined);
        stytchClient.webauthn.register({
            domain: config.passkeyOptions?.domain,
            is_passkey: true,
            session_duration_minutes: config.sessionOptions?.sessionDurationMinutes ?? DEFAULT_SESSION_DURATION_MINUTES
        }).then((data)=>{
            onEvent({
                type: StytchEventType.PasskeyRegister,
                data
            });
            dispatch({
                type: 'transition',
                screen: AppScreens.PasskeyRegistrationSuccess
            });
        }).catch((e)=>{
            onError(e);
            if (e.message.includes(SAFARI_CROSS_DEVICE_DUPLICATE_REG_ERROR_MESSAGE) || e.message.includes(CHROME_CROSS_DEVICE_DUPLICATE_REG_ERROR_MESSAGE)) {
                setError($__i18n._({
                    id: "error.duplicatePasskey",
                    message: "The Passkey cannot be created as it seems to be already registered. It is possible this Passkey was registered on another device but has synced cross-device."
                }));
                return;
            } else {
                setError($__i18n._({
                    id: "error.passkeyNotCreated",
                    message: "Your Passkey was not created. Click “Create a Passkey” to try again or skip without adding a Passkey."
                }));
            }
        });
    };
    const onSkip = ()=>{
        onEvent({
            type: StytchEventType.PasskeySkip,
            data: {}
        });
        dispatch({
            type: 'transition',
            screen: AppScreens.PasskeyRegistrationSuccess
        });
    };
    if (userState === 'loading') {
        return /*#__PURE__*/ React__default.createElement(LoadingScreen, null);
    }
    if (userState === 'noUser') {
        return /*#__PURE__*/ React__default.createElement(ErrorText, null, $__i18n._({
            id: "passkey.registrationStart.error.noUser",
            message: "Error: Cannot use PasskeyRegistration component without active user authenticated."
        }));
    }
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6
    }, /*#__PURE__*/ React__default.createElement(TextColumn, {
        header: $__i18n._({
            id: "passkey.registrationStart.title",
            message: "Set up a new Passkey"
        }),
        body: $__i18n._({
            id: "passkey.registrationStart.subtitle",
            message: "With Passkeys you don't need to remember complex passwords."
        }),
        helper: $__i18n._({
            id: "passkey.registrationStart.description",
            message: "Passkeys are encrypted digital keys you create using your fingerprint, face, or screen lock. Creating a Passkey will allow you to easily and securely log in to your account."
        })
    }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, /*#__PURE__*/ React__default.createElement(Button, {
        variant: "primary",
        onClick: ()=>onCreatePasskey()
    }, $__i18n._({
        id: "button.createPasskey",
        message: "Create a Passkey"
    })), error && /*#__PURE__*/ React__default.createElement(ErrorText, null, error), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "ghost",
        onClick: ()=>onSkip()
    }, $__i18n._({
        id: "button.skip",
        message: "Skip"
    }))));
};

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