import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useState } from 'react';
import Button from '../../components/atoms/Button.mjs';
import Column from '../../components/atoms/Column.mjs';
import Typography from '../../components/atoms/Typography.mjs';
import Input from '../../components/molecules/Input.mjs';
import { useGlobalReducer, useStytch, useConfig } from '../GlobalContextProvider.mjs';
import { AppScreens } from '../types/AppScreens.mjs';
import { useMutate } from '../utils.mjs';

const SSODiscoveryFallback = ()=>{
    const [, dispatch] = useGlobalReducer();
    const [slug, setSlug] = useState('');
    const [error, setError] = useState();
    const [isSubmitting, setIsSubmitting] = useState(false);
    const stytchClient = useStytch();
    const { ssoOptions } = useConfig();
    const { i18n: $__i18n, _: $__ } = useLingui();
    const { trigger: lookupOrganization } = useMutate('stytch.organization.getBySlug', async (_, { arg: { slug } })=>stytchClient.organization.getBySlug({
            organization_slug: slug
        }), {
        onError: ()=>{
            setError($__i18n._({
                id: "ssoDiscovery.fallback.error.unknown",
                message: "An error occurred. Please try again."
            }));
            setIsSubmitting(false);
        }
    });
    const handleSubmit = async (e)=>{
        e.preventDefault();
        setError(undefined);
        setIsSubmitting(true);
        const result = await lookupOrganization({
            slug
        });
        if (result) {
            const { organization } = result;
            if (organization === null) {
                setError($__i18n._({
                    id: "ssoDiscovery.fallback.error.orgNotFound",
                    message: "Organization not found. Please try again."
                }));
                setIsSubmitting(false);
            } else if (organization.sso_active_connections.length === 1) {
                const [connection] = organization.sso_active_connections;
                await stytchClient.sso.start({
                    connection_id: connection.connection_id,
                    login_redirect_url: ssoOptions?.loginRedirectURL,
                    signup_redirect_url: ssoOptions?.signupRedirectURL
                });
            } else {
                dispatch({
                    type: 'set_organization',
                    organization
                });
                dispatch({
                    type: 'transition',
                    screen: AppScreens.Main
                });
            }
        }
    };
    const handleTryAnotherMethod = ()=>{
        dispatch({
            type: 'transition',
            screen: AppScreens.Main
        });
    };
    const handleBack = ()=>{
        dispatch({
            type: 'navigate_back'
        });
    };
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "header"
    }, $__i18n._({
        id: "ssoDiscovery.fallback.title",
        message: "Sorry, we couldn't find any connections"
    })), /*#__PURE__*/ React__default.createElement(Typography, null, $__i18n._({
        id: "ssoDiscovery.fallback.content",
        message: "Please input the Organization's unique slug to continue. If you don't know the unique slug, log in through another method to view all of your available Organizations."
    })), /*#__PURE__*/ React__default.createElement(Column, {
        as: "form",
        onSubmit: handleSubmit,
        gap: 2
    }, /*#__PURE__*/ React__default.createElement(Input, {
        id: "organization-slug",
        hideLabel: true,
        label: $__i18n._({
            id: "formField.orgSlug.label",
            message: "Organization slug"
        }),
        value: slug,
        onChange: (e)=>setSlug(e.target.value),
        placeholder: $__i18n._({
            id: "formField.orgSlug.label",
            message: "Organization slug"
        }),
        error: error
    }), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "primary",
        loading: isSubmitting,
        type: "submit",
        disabled: !slug || isSubmitting
    }, $__i18n._({
        id: "button.continue",
        message: "Continue"
    })), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "outline",
        onClick: handleTryAnotherMethod
    }, $__i18n._({
        id: "ssoDiscovery.fallback.button.reset",
        message: "Try another method"
    })), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "ghost",
        onClick: handleBack
    }, $__i18n._({
        id: "button.goBack",
        message: "Go back"
    }))));
};

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