import { adminPortalAssets } from '../../../../../internal/assets/dist/index.mjs';
import React__default, { useState, useMemo, useCallback } from 'react';
import { extractErrorMessage } from '../../utils/extractErrorMessage.mjs';
import { AccordionSummaryCore } from '../shared/components/Accordion.mjs';
import { Button } from '../components/Button.mjs';
import { FlexBox } from '../shared/components/FlexBox.mjs';
import { Input } from '../components/Input.mjs';
import { Instruction } from '../components/Instruction.mjs';
import { Modal } from '../components/Modal.mjs';
import { PaddedContainer } from '../components/PaddedContainer.mjs';
import { useToast } from '../shared/components/Toast.mjs';
import { Typography } from '../components/Typography.mjs';
import { Screenshot } from '../shared/components/Screenshot.mjs';
import { useMutateSsoConnection, useMutateSsoConnectionByUrl } from '../utils/useMutateSsoConnection.mjs';
import { useOrgInfo } from '../utils/useOrgInfo.mjs';
import { AppDetails } from './AppDetails.mjs';
import { CreateApplication } from './CreateApplication.mjs';
import { DetailedAttributeMappingTable } from './DetailedAttributeMappingTable.mjs';
import { getIdpAndConnectionInfo, typeToUserFriendlyName } from './IdpInfo.mjs';
import { useSsoRouterController } from './SSORouter.mjs';
import Accordion from '../../../../../node_modules/@mui/material/Accordion/Accordion.mjs';
import AccordionDetails from '../../../../../node_modules/@mui/material/AccordionDetails/AccordionDetails.mjs';
import ChevronLeft from '../../../../../node_modules/@mui/icons-material/esm/ChevronLeft.mjs';

const useManualConfigurationState = ({ idp, type })=>{
    const [manualConfigurationState, setManualConfigurationState] = useState(false);
    const idpRequiresManualConfig = type === 'saml' && idp.metadataUrlLabel === false;
    const manualConfiguration = manualConfigurationState || idpRequiresManualConfig;
    return [
        manualConfiguration,
        setManualConfigurationState
    ];
};
const getDefaultAttributeMapping = (idpType)=>{
    const baseMapping = {
        email: 'NameID',
        first_name: 'firstName',
        last_name: 'lastName',
        groups: '',
        idp_user_id: ''
    };
    switch(idpType){
        case 'okta':
            return {
                ...baseMapping,
                idp_user_id: 'id'
            };
        case 'microsoft-entra':
            return {
                ...baseMapping,
                idp_user_id: 'http://schemas.microsoft.com/identity/claims/objectidentifier'
            };
        // Google Workspace and Generic SAML use the base mapping without modifications
        case 'google-workspace':
        case 'generic':
        default:
            return baseMapping;
    }
};
const OktaSamlInstructions = ({ connection: connectionProp, metadataUrl, setMetadataUrl })=>{
    const { idp } = getIdpAndConnectionInfo(connectionProp);
    const { data } = useOrgInfo();
    const organizationName = data?.organization_name ?? '';
    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Instruction, null, "Within your newly created SAML Application, navigate to ", /*#__PURE__*/ React__default.createElement("b", null, "Sign On"), " tab and under", ' ', /*#__PURE__*/ React__default.createElement("b", null, "Settings → SAML 2.0 → Metadata Details"), " copy the provided ", /*#__PURE__*/ React__default.createElement("b", null, "Metadata URL"), "."), /*#__PURE__*/ React__default.createElement(PaddedContainer, null, /*#__PURE__*/ React__default.createElement(Input, {
        label: `${idp.metadataUrlLabel}`,
        placeholder: `Enter ${idp.metadataUrlLabel}`,
        value: metadataUrl,
        onChange: setMetadataUrl
    })), /*#__PURE__*/ React__default.createElement(Screenshot, {
        src: adminPortalAssets.oktaSamlGetMetadataUrl,
        alt: "Okta SAML get metadata URL"
    })), /*#__PURE__*/ React__default.createElement(Instruction, null, "Navigate to ", /*#__PURE__*/ React__default.createElement("b", null, "Assignments"), " and assign users who should be able to access ", organizationName, " manually or via group membership."), /*#__PURE__*/ React__default.createElement(Screenshot, {
        src: adminPortalAssets.oktaAssign,
        alt: "Okta assign"
    }));
};
const EntraSamlInstructions = ({ connection: connectionProp, metadataUrl, setMetadataUrl })=>{
    const { idp } = getIdpAndConnectionInfo(connectionProp);
    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Instruction, null, "Within ", /*#__PURE__*/ React__default.createElement("b", null, "Step 3: SAML Certificates"), " you will see the ", /*#__PURE__*/ React__default.createElement("b", null, "App Federation Metadata Url"), " value. Copy to clipboard and paste below:"), /*#__PURE__*/ React__default.createElement(PaddedContainer, null, /*#__PURE__*/ React__default.createElement(Input, {
        label: "App Federation Metadata Url",
        placeholder: `Enter ${idp.metadataUrlLabel}`,
        value: metadataUrl,
        onChange: setMetadataUrl
    })), /*#__PURE__*/ React__default.createElement(Screenshot, {
        src: adminPortalAssets.entraSamlMetadataUrl,
        alt: "Entra SAML Metadata URL"
    }), /*#__PURE__*/ React__default.createElement(Instruction, null, "You can add users to your application in Entra by navigating to ", /*#__PURE__*/ React__default.createElement("b", null, "Users and groups"), " in the left-hand navigation and selecting ", /*#__PURE__*/ React__default.createElement("b", null, "Add user/group"), " from the top."), /*#__PURE__*/ React__default.createElement(Screenshot, {
        src: adminPortalAssets.entraAddUsersAndGroups,
        alt: "Entra Add Users and Groups"
    })));
};
const TransformInputToIssuer = ({ connection: connectionProp, issuer, setIssuer, issuerDerivedValue, setIssuerDerivedValue })=>{
    const { idp } = getIdpAndConnectionInfo(connectionProp);
    return idp.transformInputToIssuer ? /*#__PURE__*/ React__default.createElement(Input, {
        label: idp.issuerDerivedLabel,
        labelVariant: "body1",
        placeholder: `Enter ${idp.issuerDerivedLabel}`,
        value: issuerDerivedValue,
        onChange: setIssuerDerivedValue
    }) : /*#__PURE__*/ React__default.createElement(Input, {
        label: idp.issuerLabel,
        labelVariant: "body1",
        placeholder: `Enter ${idp.issuerLabel}`,
        value: issuer,
        onChange: setIssuer
    });
};
const OktaOidcInstructions = ({ connection: connectionProp, clientId, setClientId, clientSecret, setClientSecret, issuer, setIssuer, issuerDerivedValue, setIssuerDerivedValue })=>{
    const { idp } = getIdpAndConnectionInfo(connectionProp);
    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Instruction, null, "Within the ", /*#__PURE__*/ React__default.createElement("b", null, "General"), " tab for your newly created OIDC Application, copy over the ClientID provided:"), /*#__PURE__*/ React__default.createElement(PaddedContainer, null, /*#__PURE__*/ React__default.createElement(Input, {
        label: idp.clientIdLabel,
        labelVariant: "body1",
        placeholder: `Enter ${idp.clientIdLabel}`,
        value: clientId,
        onChange: setClientId
    }))), /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Instruction, null, "Ensure that ", /*#__PURE__*/ React__default.createElement("b", null, "Client authentication"), " is set to ", /*#__PURE__*/ React__default.createElement("b", null, "Client secret"), " and generate and copy a Client Secret:"), /*#__PURE__*/ React__default.createElement(PaddedContainer, null, /*#__PURE__*/ React__default.createElement(Input, {
        label: idp.clientSecretLabel,
        labelVariant: "body1",
        placeholder: `Enter ${idp.clientSecretLabel}`,
        value: clientSecret,
        onChange: setClientSecret
    }))), /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Screenshot, {
        src: adminPortalAssets.oktaClientSecret,
        alt: "Okta client secret"
    })), /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Instruction, null, "Input your Okta URL (Issuer), which can be found in the far right-hand dropdown in the top navigation bar under your email. It should look like ", `https://<tenant_name>.okta.com`, "."), /*#__PURE__*/ React__default.createElement(PaddedContainer, null, /*#__PURE__*/ React__default.createElement(TransformInputToIssuer, {
        connection: connectionProp,
        issuer: issuer,
        setIssuer: setIssuer,
        issuerDerivedValue: issuerDerivedValue,
        setIssuerDerivedValue: setIssuerDerivedValue
    }))));
};
const EntraOidcInstructions = ({ connection: connectionProp, clientId, setClientId, clientSecret, setClientSecret, issuer, setIssuer, issuerDerivedValue, setIssuerDerivedValue })=>{
    const { idp } = getIdpAndConnectionInfo(connectionProp);
    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Instruction, null, "Navigate to ", /*#__PURE__*/ React__default.createElement("b", null, "App registration → Overview"), " and under ", /*#__PURE__*/ React__default.createElement("b", null, "Essentials"), " copy over the following values:"), /*#__PURE__*/ React__default.createElement(PaddedContainer, null, /*#__PURE__*/ React__default.createElement(Input, {
        label: idp.clientIdLabel,
        labelVariant: "body1",
        placeholder: `Enter ${idp.clientIdLabel}`,
        value: clientId,
        onChange: setClientId
    }), /*#__PURE__*/ React__default.createElement(TransformInputToIssuer, {
        connection: connectionProp,
        issuer: issuer,
        setIssuer: setIssuer,
        issuerDerivedValue: issuerDerivedValue,
        setIssuerDerivedValue: setIssuerDerivedValue
    })), /*#__PURE__*/ React__default.createElement(Screenshot, {
        src: adminPortalAssets.entraOidcClientIdAndIssuer,
        alt: "Entra OIDC Client ID and Issuer"
    })), /*#__PURE__*/ React__default.createElement(Instruction, null, "Navigate to ", /*#__PURE__*/ React__default.createElement("b", null, "Certificates & secrets"), " from the left-hand navigation and select ", /*#__PURE__*/ React__default.createElement("b", null, "New client secrets"), ' ', "from the ", /*#__PURE__*/ React__default.createElement("b", null, "Client secrets"), " section. Add a description, select an expiry, and click ", /*#__PURE__*/ React__default.createElement("b", null, "Add"), ". Your new secret will now be listed in the client secrets table."), /*#__PURE__*/ React__default.createElement(Screenshot, {
        src: adminPortalAssets.entraOidcNewClientSecret,
        alt: "Entra OIDC New Client Secret"
    }), /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Instruction, null, "Copy the secret from the ", /*#__PURE__*/ React__default.createElement("b", null, "Value"), " column and input below:"), /*#__PURE__*/ React__default.createElement(PaddedContainer, null, /*#__PURE__*/ React__default.createElement(Input, {
        label: idp.clientSecretLabel,
        labelVariant: "body1",
        placeholder: `Enter ${idp.clientSecretLabel}`,
        value: clientSecret,
        onChange: setClientSecret
    })), /*#__PURE__*/ React__default.createElement(Screenshot, {
        src: adminPortalAssets.entraOidcSecretValue,
        alt: "Entra OIDC Secret Value"
    })));
};
const OktaSamlManualConfigurationInstructions = ({ connection: connectionProp, idpValueInputs })=>{
    const { idp } = getIdpAndConnectionInfo(connectionProp);
    const { data } = useOrgInfo();
    const organizationName = data?.organization_name ?? '';
    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Instruction, null, "Expand ", /*#__PURE__*/ React__default.createElement("b", null, "More details"), " within the ", /*#__PURE__*/ React__default.createElement("b", null, "Metadata Details"), " and copy over the following information:"), /*#__PURE__*/ React__default.createElement(PaddedContainer, null, idpValueInputs ? idp.idpValueOrder.map((key)=>/*#__PURE__*/ React__default.createElement(React__default.Fragment, {
            key: key
        }, idpValueInputs[key])) : undefined)), /*#__PURE__*/ React__default.createElement(Instruction, null, "Navigate to ", /*#__PURE__*/ React__default.createElement("b", null, "Assignments"), " and assign users who should be able to access ", organizationName, " manually or via group membership."), /*#__PURE__*/ React__default.createElement(Screenshot, {
        src: adminPortalAssets.oktaAssign,
        alt: "Okta assign"
    }));
};
const EntraSamlManualConfigurationInstructions = ({ connection: connectionProp, x509Certificate, setX509Certificate, ssoUrl, setSsoUrl, entityId, setEntityId })=>{
    const { idp } = getIdpAndConnectionInfo(connectionProp);
    const { data } = useOrgInfo();
    const organizationName = data?.organization_name ?? '';
    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Instruction, null, "Click ", /*#__PURE__*/ React__default.createElement("b", null, "Edit"), " on the ", /*#__PURE__*/ React__default.createElement("b", null, "SAML Certificate"), " section, and select ", /*#__PURE__*/ React__default.createElement("b", null, "PEM Certificate download"), " on the right hand action toggle for the currently Active certificate, open the Certificate and copy below:"), /*#__PURE__*/ React__default.createElement(PaddedContainer, null, /*#__PURE__*/ React__default.createElement(Input, {
        label: idp.x509CertificateLabel,
        labelVariant: "body1",
        placeholder: `Enter ${idp.x509CertificateLabel}`,
        value: x509Certificate,
        onChange: setX509Certificate
    }))), /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Instruction, null, "Close the SAML Certificate section, and under Step 4: Set up ", organizationName, " copy over the following values:"), /*#__PURE__*/ React__default.createElement(PaddedContainer, null, /*#__PURE__*/ React__default.createElement(Input, {
        label: idp.idpSsoUrlLabel,
        labelVariant: "body1",
        placeholder: `Enter ${idp.idpSsoUrlLabel}`,
        value: ssoUrl,
        onChange: setSsoUrl
    }), /*#__PURE__*/ React__default.createElement(Input, {
        label: idp.idpEntityIdLabel,
        labelVariant: "body1",
        placeholder: `Enter ${idp.idpEntityIdLabel}`,
        value: entityId,
        onChange: setEntityId
    }))), /*#__PURE__*/ React__default.createElement(Instruction, null, "Click ", /*#__PURE__*/ React__default.createElement("b", null, "Save"), "."), /*#__PURE__*/ React__default.createElement(Instruction, null, "You can add users to your application in Entra by navigating to ", /*#__PURE__*/ React__default.createElement("b", null, "Users and groups"), " in the left-hand navigation and selecting ", /*#__PURE__*/ React__default.createElement("b", null, "Add user/group"), " from the top."), /*#__PURE__*/ React__default.createElement(Screenshot, {
        src: adminPortalAssets.entraAddUsersAndGroups,
        alt: "Entra Add Users and Groups"
    }));
};
const GoogleSamlManualConfigurationInstructions = ({ connection: connectionProp, idpValueInputs })=>{
    const { idp } = getIdpAndConnectionInfo(connectionProp);
    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Instruction, null, "From ", /*#__PURE__*/ React__default.createElement("b", null, "Option 2: Copy the SSO URL, entity ID and certificate"), " copy over the following values:"), /*#__PURE__*/ React__default.createElement(PaddedContainer, null, idpValueInputs ? idp.idpValueOrder.map((key)=>/*#__PURE__*/ React__default.createElement(React__default.Fragment, {
            key: key
        }, idpValueInputs[key])) : undefined), /*#__PURE__*/ React__default.createElement(Screenshot, {
        src: adminPortalAssets.googleSamlConfigInfo,
        alt: "Google SAML Config Info"
    })), /*#__PURE__*/ React__default.createElement(Instruction, null, "Click ", /*#__PURE__*/ React__default.createElement("b", null, "Continue"), "."));
};
const SSONewConnectionConfigureScreen = ({ connection: connectionProp })=>{
    const { navigate } = useSsoRouterController();
    const info = getIdpAndConnectionInfo(connectionProp);
    const { connection, idp, type } = info;
    const connectionDisplayName = connection.display_name;
    const { mutate } = useMutateSsoConnection(type);
    const { mutate: mutateByUrl } = useMutateSsoConnectionByUrl();
    const { useBlockNavigation } = useSsoRouterController();
    const [block, setBlock] = useState(true);
    const { allowNavigation, blocked, cancelNavigation } = useBlockNavigation(block);
    const [manualConfiguration, setManualConfiguration] = useManualConfigurationState(info);
    const [metadataUrl, setMetadataUrl] = useState('');
    const [ssoUrl, setSsoUrl] = useState('');
    const [entityId, setEntityId] = useState('');
    const [x509Certificate, setX509Certificate] = useState('');
    const [clientId, setClientId] = useState('');
    const [clientSecret, setClientSecret] = useState('');
    const [issuer, setIssuer] = useState('');
    const [issuerDerivedValue, setIssuerDerivedValue] = useState('');
    const [authorizationUrl, setAuthorizationUrl] = useState('');
    const [tokenUrl, setTokenUrl] = useState('');
    const [userInfoUrl, setUserInfoUrl] = useState('');
    const [jwksUrl, setJwksUrl] = useState('');
    const [attributeMappingState, setAttributeMappingState] = useState(()=>({
            attributeMapping: getDefaultAttributeMapping(connection.identity_provider)
        }));
    const attributeMapping = useMemo(// Strip attributes that are not mapped to a value (e.g., the default `groups` attribute)
    ()=>Object.fromEntries(Object.entries(attributeMappingState.attributeMapping).filter(([, value])=>value)), [
        attributeMappingState.attributeMapping
    ]);
    const { openToast } = useToast();
    const handleSubmit = useCallback(async (e)=>{
        e.preventDefault();
        if (!connection) {
            return;
        }
        try {
            if (type === 'saml') {
                if (manualConfiguration) {
                    await mutate({
                        connection_id: connection.connection_id,
                        idp_sso_url: ssoUrl,
                        idp_entity_id: entityId,
                        x509_certificate: x509Certificate,
                        attribute_mapping: attributeMapping
                    });
                } else {
                    await mutate({
                        connection_id: connection.connection_id,
                        attribute_mapping: attributeMapping
                    });
                    if (metadataUrl) {
                        await mutateByUrl({
                            connection_id: connection.connection_id,
                            metadata_url: metadataUrl
                        });
                    }
                }
            } else {
                const options = {
                    connection_id: connection.connection_id,
                    client_id: clientId,
                    client_secret: clientSecret
                };
                if (idp.transformInputToIssuer) {
                    if (issuerDerivedValue) {
                        options.issuer = idp.transformInputToIssuer(issuerDerivedValue);
                    }
                } else {
                    options.issuer = issuer;
                }
                if (manualConfiguration) {
                    options.authorization_url = authorizationUrl;
                    options.token_url = tokenUrl;
                    options.userinfo_url = userInfoUrl;
                    options.jwks_url = jwksUrl;
                }
                await mutate(options);
            }
            setBlock(false);
            navigate({
                screen: 'connectionsList'
            });
        } catch (e) {
            const message = extractErrorMessage(e);
            openToast({
                text: message || 'Unable to save connection',
                type: 'error'
            });
        }
    }, [
        connection,
        type,
        navigate,
        manualConfiguration,
        mutate,
        ssoUrl,
        entityId,
        x509Certificate,
        attributeMapping,
        metadataUrl,
        mutateByUrl,
        clientId,
        clientSecret,
        idp,
        issuerDerivedValue,
        issuer,
        authorizationUrl,
        tokenUrl,
        userInfoUrl,
        jwksUrl,
        openToast
    ]);
    const renderSamlConfiguration = ()=>{
        if (type !== 'saml') return;
        const idpValueInputs = {
            ssoUrl: /*#__PURE__*/ React__default.createElement(Input, {
                label: idp.idpSsoUrlLabel,
                labelVariant: "body1",
                placeholder: `Enter ${idp.idpSsoUrlLabel}`,
                value: ssoUrl,
                onChange: setSsoUrl
            }),
            entityId: /*#__PURE__*/ React__default.createElement(Input, {
                label: idp.idpEntityIdLabel,
                labelVariant: "body1",
                placeholder: `Enter ${idp.idpEntityIdLabel}`,
                value: entityId,
                onChange: setEntityId
            }),
            certificate: /*#__PURE__*/ React__default.createElement(Input, {
                label: idp.x509CertificateLabel,
                labelVariant: "body1",
                placeholder: `Enter ${idp.x509CertificateLabel}`,
                value: x509Certificate,
                onChange: setX509Certificate
            })
        };
        if (manualConfiguration) {
            switch(connection.identity_provider){
                case 'okta':
                    return /*#__PURE__*/ React__default.createElement(OktaSamlManualConfigurationInstructions, {
                        connection: connection,
                        idpValueInputs: idpValueInputs
                    });
                case 'microsoft-entra':
                    return /*#__PURE__*/ React__default.createElement(EntraSamlManualConfigurationInstructions, {
                        connection: connection,
                        x509Certificate: x509Certificate,
                        setX509Certificate: setX509Certificate,
                        ssoUrl: ssoUrl,
                        setSsoUrl: setSsoUrl,
                        entityId: entityId,
                        setEntityId: setEntityId
                    });
                case 'google-workspace':
                    return /*#__PURE__*/ React__default.createElement(GoogleSamlManualConfigurationInstructions, {
                        connection: connection,
                        idpValueInputs: idpValueInputs
                    });
            }
        }
        switch(connection.identity_provider){
            case 'okta':
                return /*#__PURE__*/ React__default.createElement(OktaSamlInstructions, {
                    connection: connection,
                    metadataUrl: metadataUrl,
                    setMetadataUrl: setMetadataUrl
                });
            case 'microsoft-entra':
                return /*#__PURE__*/ React__default.createElement(EntraSamlInstructions, {
                    connection: connection,
                    metadataUrl: metadataUrl,
                    setMetadataUrl: setMetadataUrl
                });
        }
        return manualConfiguration ? idpValueInputs ? idp.idpValueOrder.map((key)=>/*#__PURE__*/ React__default.createElement(React__default.Fragment, {
                key: key
            }, idpValueInputs[key])) : undefined : /*#__PURE__*/ React__default.createElement("div", null, /*#__PURE__*/ React__default.createElement(Instruction, null, "Enter the ", idp.metadataUrlLabel, " to configure your connection automatically."), /*#__PURE__*/ React__default.createElement(Input, {
            placeholder: `Enter ${idp.metadataUrlLabel}`,
            caption: `If you don’t know your ${idp.metadataUrlLabel}, you can configure your connection manually.`,
            value: metadataUrl,
            onChange: setMetadataUrl
        }));
    };
    const renderOidcConfiguration = ()=>{
        if (type !== 'oidc') return;
        if (!manualConfiguration) {
            switch(connection.identity_provider){
                case 'okta':
                    return /*#__PURE__*/ React__default.createElement(OktaOidcInstructions, {
                        connection: connection,
                        clientId: clientId,
                        setClientId: setClientId,
                        clientSecret: clientSecret,
                        setClientSecret: setClientSecret,
                        issuer: issuer,
                        setIssuer: setIssuer,
                        issuerDerivedValue: issuerDerivedValue,
                        setIssuerDerivedValue: setIssuerDerivedValue
                    });
                case 'microsoft-entra':
                    return /*#__PURE__*/ React__default.createElement(EntraOidcInstructions, {
                        connection: connection,
                        clientId: clientId,
                        setClientId: setClientId,
                        clientSecret: clientSecret,
                        setClientSecret: setClientSecret,
                        issuer: issuer,
                        setIssuer: setIssuer,
                        issuerDerivedValue: issuerDerivedValue,
                        setIssuerDerivedValue: setIssuerDerivedValue
                    });
            }
        }
        return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Input, {
            label: idp.clientIdLabel,
            labelVariant: "body1",
            placeholder: `Enter ${idp.clientIdLabel}`,
            value: clientId,
            onChange: setClientId
        }), /*#__PURE__*/ React__default.createElement(Input, {
            label: idp.clientSecretLabel,
            labelVariant: "body1",
            placeholder: `Enter ${idp.clientSecretLabel}`,
            value: clientSecret,
            onChange: setClientSecret
        }), /*#__PURE__*/ React__default.createElement(TransformInputToIssuer, {
            connection: connection,
            issuer: issuer,
            setIssuer: setIssuer,
            issuerDerivedValue: issuerDerivedValue,
            setIssuerDerivedValue: setIssuerDerivedValue
        }), manualConfiguration && /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Input, {
            label: "Authorization URL",
            labelVariant: "body1",
            placeholder: "Enter Authorization URL",
            value: authorizationUrl,
            onChange: setAuthorizationUrl
        }), /*#__PURE__*/ React__default.createElement(Input, {
            label: "Token URL",
            labelVariant: "body1",
            placeholder: "Enter Token URL",
            value: tokenUrl,
            onChange: setTokenUrl
        }), /*#__PURE__*/ React__default.createElement(Input, {
            label: "User Info URL",
            labelVariant: "body1",
            placeholder: "Enter User Info",
            value: userInfoUrl,
            onChange: setUserInfoUrl
        }), /*#__PURE__*/ React__default.createElement(Input, {
            label: "JWKS URL",
            labelVariant: "body1",
            placeholder: "Enter JWKS URL",
            value: jwksUrl,
            onChange: setJwksUrl
        })));
    };
    const stepMap = {
        createApplication: /*#__PURE__*/ React__default.createElement(Accordion, null, /*#__PURE__*/ React__default.createElement(AccordionSummaryCore, null, /*#__PURE__*/ React__default.createElement(Typography, null, "Create ", typeToUserFriendlyName(type), " Application.")), /*#__PURE__*/ React__default.createElement(AccordionDetails, null, /*#__PURE__*/ React__default.createElement(CreateApplication, {
            connection: connection
        }))),
        copyToIdp: /*#__PURE__*/ React__default.createElement(Accordion, null, /*#__PURE__*/ React__default.createElement(AccordionSummaryCore, null, /*#__PURE__*/ React__default.createElement(Typography, null, "Copy the following App values to ", idp.copyToOrFromIdpDisplayName, ".")), /*#__PURE__*/ React__default.createElement(AccordionDetails, null, /*#__PURE__*/ React__default.createElement(AppDetails, {
            connection: connection
        }))),
        copyFromIdp: /*#__PURE__*/ React__default.createElement(Accordion, null, /*#__PURE__*/ React__default.createElement(AccordionSummaryCore, null, /*#__PURE__*/ React__default.createElement(Typography, null, "Enter the following from ", idp.copyToOrFromIdpDisplayName, ".")), /*#__PURE__*/ React__default.createElement(AccordionDetails, null, /*#__PURE__*/ React__default.createElement(FlexBox, {
            flexDirection: "column",
            gap: 2
        }, /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, type === 'saml' && /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, renderSamlConfiguration(), !!idp.metadataUrlLabel && /*#__PURE__*/ React__default.createElement(Button, {
            compact: true,
            variant: "ghost",
            onClick: ()=>{
                setManualConfiguration(!manualConfiguration);
            }
        }, manualConfiguration ? `Configure using ${idp.metadataUrlLabel}` : 'Configure manually')), type === 'oidc' && /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, renderOidcConfiguration(), /*#__PURE__*/ React__default.createElement(Button, {
            compact: true,
            variant: "ghost",
            onClick: ()=>{
                setManualConfiguration(!manualConfiguration);
            }
        }, manualConfiguration ? `Configure using ${idp.issuerDerivedLabel ?? idp.issuerLabel}` : 'Configure manually')))))),
        attributeMapping: type === 'saml' && /*#__PURE__*/ React__default.createElement(Accordion, null, /*#__PURE__*/ React__default.createElement(AccordionSummaryCore, null, /*#__PURE__*/ React__default.createElement(Typography, null, "Set your ", idp.attributeMappingLabel, ".")), /*#__PURE__*/ React__default.createElement(AccordionDetails, null, /*#__PURE__*/ React__default.createElement(DetailedAttributeMappingTable, {
            connection: connection,
            localState: attributeMappingState,
            setLocalState: setAttributeMappingState,
            remoteState: attributeMappingState
        })))
    };
    const steps = idp.setupOrder.map((step)=>/*#__PURE__*/ React__default.createElement(React__default.Fragment, {
            key: step
        }, stepMap[step]));
    return /*#__PURE__*/ React__default.createElement("form", {
        onSubmit: handleSubmit
    }, /*#__PURE__*/ React__default.createElement(Modal, {
        isOpen: block && blocked,
        close: cancelNavigation,
        confirm: ()=>{
            allowNavigation();
            return Promise.resolve();
        },
        title: `Save ${connectionDisplayName}?`,
        confirmButtonText: "Save and complete later",
        description: 'Your SSO connection is not fully configured. It will remain pending until you complete all necessary configuration steps. You can save your progress and complete later or cancel to finish configuration.'
    }), /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "column",
        gap: 3
    }, /*#__PURE__*/ React__default.createElement(Button, {
        variant: "ghost",
        compact: true,
        onClick: ()=>{
            navigate({
                screen: 'connectionsList'
            });
        },
        startIcon: /*#__PURE__*/ React__default.createElement(ChevronLeft, null)
    }, "Back to all SSO connections"), /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "h2"
    }, "Configure ", connectionDisplayName), /*#__PURE__*/ React__default.createElement("div", null, steps), /*#__PURE__*/ React__default.createElement(FlexBox, {
        justifyContent: "flex-end"
    }, /*#__PURE__*/ React__default.createElement(Button, {
        type: "submit"
    }, "Create"))));
};

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