import React__default, { useState, useCallback } from 'react';
import '../../../../../_virtual/index2.mjs';
import { useSWRConfig } from '../../../../../node_modules/swr/_internal/dist/index.mjs';
import { Button } from '../components/Button.mjs';
import { FlexBox } from '../shared/components/FlexBox.mjs';
import { Input } from '../components/Input.mjs';
import { Select } from '../components/Select.mjs';
import { Typography } from '../components/Typography.mjs';
import { organizationGetKey } from '../utils/organizationGetKey.mjs';
import { useStytchClient } from '../utils/useStytchClient.mjs';
import { scimIdpMap } from './scimInfo.mjs';
import { useScimRouterController } from './SCIMRouter.mjs';

const idpSelectItems$1 = Object.entries(scimIdpMap).map(([idp, { displayName }])=>({
        value: idp,
        label: displayName
    }));
const SCIMNewConnectionScreen = ()=>{
    const { navigate } = useScimRouterController();
    const [idp, setIdp] = useState();
    const [displayName, setDisplayName] = useState('');
    const canCreate = displayName && idp;
    const client = useStytchClient();
    const { mutate } = useSWRConfig();
    const handleSubmit = useCallback(async (e)=>{
        e.preventDefault();
        if (!canCreate) {
            return;
        }
        const response = await mutate('scim_create', async ()=>{
            const params = {
                display_name: displayName,
                identity_provider: idp
            };
            const result = await client.scim.createConnection(params);
            const connection = result.connection;
            mutate(organizationGetKey(connection.organization_id), async (org)=>{
                if (org) {
                    return {
                        ...org,
                        scim_active_connection: {
                            connection_id: connection.connection_id,
                            display_name: connection.display_name
                        }
                    };
                }
            });
            return connection;
        });
        if (response) {
            navigate({
                screen: 'newConnectionConfigure',
                params: {
                    connection: response
                }
            });
        }
    }, [
        canCreate,
        client.scim,
        displayName,
        idp,
        mutate,
        navigate
    ]);
    return /*#__PURE__*/ React__default.createElement("form", {
        onSubmit: handleSubmit
    }, /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "column",
        gap: 3
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "h2"
    }, "Create SCIM Connection"), /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "column"
    }, /*#__PURE__*/ React__default.createElement(Typography, null, "Select your IdP."), /*#__PURE__*/ React__default.createElement(Select, {
        width: 360,
        placeholder: "Select",
        value: idp,
        selectItems: idpSelectItems$1,
        onChange: (value)=>setIdp(value)
    })), /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "column"
    }, /*#__PURE__*/ React__default.createElement(Typography, null, "Enter a display name for your SCIM connection."), /*#__PURE__*/ React__default.createElement(Input, {
        value: displayName,
        onChange: (value)=>setDisplayName(value),
        placeholder: "Display name"
    })), /*#__PURE__*/ React__default.createElement(Typography, null, "Once you click “Create” the SCIM connection will be created. If you need to change your IdP after this, you will need to delete the connection and recreate."), /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "row",
        gap: 2
    }, /*#__PURE__*/ React__default.createElement(Button, {
        variant: "ghost",
        onClick: ()=>{
            navigate({
                screen: 'scimConnection'
            });
        }
    }, "Cancel"), /*#__PURE__*/ React__default.createElement(Button, {
        type: "submit",
        disabled: !canCreate
    }, "Create"))));
};

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