import React__default, { useMemo, useCallback } from 'react';
import { Button } from '../components/Button.mjs';
import { useDeleteConnection, DeleteConfirmModal } from '../components/DeleteConnection.mjs';
import { FlexBox } from '../shared/components/FlexBox.mjs';
import { PageLoadingIndicator } from '../components/PageLoadingIndicator.mjs';
import { Tag } from '../components/Tag.mjs';
import { Typography } from '../components/Typography.mjs';
import { useAdminPortalSSOUIConfig } from '../StytchClientContext.mjs';
import { useOrgInfo } from '../utils/useOrgInfo.mjs';
import { useRbac } from '../utils/useRbac.mjs';
import { useSsoConnections } from '../utils/useSsoConnections.mjs';
import { useStytchClient } from '../utils/useStytchClient.mjs';
import { DetailsSection } from './DetailsSection.mjs';
import { OrganizationUpdatesSection } from './OrganizationUpdatesSection.mjs';
import { RoleAssignmentsSection } from './RoleAssignmentsSection.mjs';
import { useSsoRouterController } from './SSORouter.mjs';
import ChevronLeft from '../../../../../node_modules/@mui/icons-material/esm/ChevronLeft.mjs';

const SSOConnectionDetailsScreen = ({ connectionId })=>{
    const { navigate } = useSsoRouterController();
    const client = useStytchClient();
    const uiConfig = useAdminPortalSSOUIConfig();
    const { data: canGetConnection } = useRbac('stytch.sso', 'get');
    const { data: canDeleteConnection } = useRbac('stytch.sso', 'delete');
    const { data: canUpdateConnection } = useRbac('stytch.sso', 'update');
    const { data: connections, isLoading } = useSsoConnections({
        shouldFetch: !!canGetConnection
    });
    const { data: orgInfo } = useOrgInfo();
    const defaultConnectionId = orgInfo?.sso_default_connection_id;
    const defaultConnectionName = useMemo(()=>connections ? [
            ...connections.oidc_connections,
            ...connections.saml_connections
        ].find((connection)=>connection.connection_id === defaultConnectionId)?.display_name : undefined, [
        connections,
        defaultConnectionId
    ]);
    const connection = useMemo(()=>{
        const oidcMatch = connections?.oidc_connections?.find(({ connection_id })=>connection_id === connectionId);
        if (oidcMatch) {
            return {
                ...oidcMatch,
                connectionType: 'oidc'
            };
        }
        const samlMatch = connections?.saml_connections?.find(({ connection_id })=>connection_id === connectionId);
        if (samlMatch) {
            return {
                ...samlMatch,
                connectionType: 'saml'
            };
        }
        const externalMatch = connections?.external_connections?.find(({ connection_id })=>connection_id === connectionId);
        if (externalMatch) {
            return {
                ...externalMatch,
                connectionType: 'external'
            };
        }
        return null;
    }, [
        connectionId,
        connections?.external_connections,
        connections?.oidc_connections,
        connections?.saml_connections
    ]);
    const connectionType = connection?.connectionType;
    const connectionName = connection?.display_name;
    const isDefaultConnection = connection?.connection_id === defaultConnectionId;
    const isOnlyConnection = (connections?.oidc_connections.length ?? 0) + (connections?.saml_connections.length ?? 0) === 1;
    const connectionSupportsRoleAssignments = connectionType === 'saml' || connectionType === 'external';
    const { handleRequestDelete, modalProps } = useDeleteConnection({
        onConfirm: ()=>{
            navigate({
                screen: 'connectionsList'
            });
        }
    });
    const handleDeleteClick = useCallback(()=>{
        if (connectionId && connectionName && connectionType) {
            handleRequestDelete({
                id: connectionId,
                displayName: connectionName,
                connectionType
            });
        }
    }, [
        connectionId,
        connectionName,
        connectionType,
        handleRequestDelete
    ]);
    const handleTestClick = useCallback(()=>{
        if (connection?.connection_id) {
            try {
                client.sso.start({
                    connection_id: connection.connection_id,
                    login_redirect_url: uiConfig?.testLoginRedirectURL,
                    signup_redirect_url: uiConfig?.testSignupRedirectURL
                });
            } catch  {
            // noop
            }
        }
    }, [
        client.sso,
        connection?.connection_id,
        uiConfig?.testLoginRedirectURL,
        uiConfig?.testSignupRedirectURL
    ]);
    const isActive = connection?.status === 'active';
    return /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "column",
        gap: 3
    }, /*#__PURE__*/ React__default.createElement(Button, {
        compact: true,
        variant: "ghost",
        onClick: ()=>{
            navigate({
                screen: 'connectionsList'
            });
        },
        startIcon: /*#__PURE__*/ React__default.createElement(ChevronLeft, null)
    }, "Back to all SSO connections"), /*#__PURE__*/ React__default.createElement(DeleteConfirmModal, modalProps), connection ? /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(FlexBox, {
        alignItems: "center",
        justifyContent: "space-between"
    }, /*#__PURE__*/ React__default.createElement(FlexBox, {
        alignItems: "center",
        justifyContent: "flex-start",
        gap: 1
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "h2"
    }, connectionName), isDefaultConnection && /*#__PURE__*/ React__default.createElement(Tag, {
        size: "small"
    }, "Default")), isActive && /*#__PURE__*/ React__default.createElement(Button, {
        onClick: handleTestClick
    }, "Test connection")), /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "column",
        gap: 3
    }, /*#__PURE__*/ React__default.createElement(OrganizationUpdatesSection, {
        connection: connection,
        defaultConnectionName: defaultConnectionName,
        isDefaultConnection: isDefaultConnection
    }), connectionSupportsRoleAssignments && /*#__PURE__*/ React__default.createElement(RoleAssignmentsSection, {
        canUpdateConnection: !!canUpdateConnection,
        connection: connection
    }), /*#__PURE__*/ React__default.createElement(DetailsSection, {
        canUpdateConnection: !!canUpdateConnection,
        connection: connection
    })), canDeleteConnection && (!isDefaultConnection || isOnlyConnection) && /*#__PURE__*/ React__default.createElement(Button, {
        compact: true,
        variant: "ghost",
        warning: true,
        onClick: handleDeleteClick
    }, "Delete connection")) : isLoading && /*#__PURE__*/ React__default.createElement(PageLoadingIndicator, null));
};

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