import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useState } from 'react';
import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
import { Markdown } from '../Markdown/index.js';
import { SecuritySchemeItem } from './SecuritySchemeItem.js';
import { Tag } from './styled.js';
import { useTranslate } from '../../hooks/index.js';
import { getOptionalScopes, getRequiredScopes } from './helper.js';
import { styled } from '../../styled-components.js';
function OAuthScopesComponent({ id, securities, flows }) {
    const requiredScopes = getRequiredScopes(id, securities);
    return (_jsxs(_Fragment, { children: [_jsx(OAuthRequiredScopes, { flows: flows, requiredScopes: requiredScopes }), _jsx(OAuthOptionalScopes, { flows: flows, requiredScopes: requiredScopes })] }));
}
function OAuthOptionalScopes({ flows, requiredScopes }) {
    return (flows &&
        Object.keys(flows).map((type) => (_jsx(OAuthOptionalScope, { flow: flows[type], requiredScopes: requiredScopes }, type))));
}
function OAuthOptionalScope({ flow, requiredScopes, }) {
    const translate = useTranslate();
    const [showScopes, setShowScopes] = useState(false);
    const flowScopes = Object.keys(flow?.scopes || {});
    const optionalScopes = getOptionalScopes(requiredScopes, flowScopes);
    if (optionalScopes.length === 0) {
        return null;
    }
    const toggleScopes = () => {
        setShowScopes((prevShowScopes) => !prevShowScopes);
    };
    return (_jsxs(_Fragment, { children: [_jsx(SecuritySchemeItem, { label: _jsxs(ScopeHeader, { onClick: toggleScopes, children: [translate(showScopes ? 'openapi.hideOptionalScopes' : 'openapi.showOptionalScopes', showScopes ? 'Hide optional scopes' : 'Show optional scopes'), _jsx(AnimatedChevronWrapper, { isOpen: showScopes, children: _jsx(ChevronRightIcon, { size: "var(--font-size-base)", color: "var(--tree-content-color-default)" }) })] }), value: " " }), _jsx(ScopesListWrapper, { isOpen: showScopes, children: optionalScopes.map((scope) => (_jsx(SecuritySchemeItem, { label: _jsx(StyledTag, { className: "tag-grey", children: scope }), value: _jsx(Markdown, { source: flow?.scopes[scope] || '' }) }, scope))) })] }));
}
function OAuthRequiredScopes({ requiredScopes, flows }) {
    const translate = useTranslate();
    if (requiredScopes.length === 0) {
        return null;
    }
    if (flows && Object.keys(flows).length > 0) {
        return Object.keys(flows).map((type) => (_jsx(OAuthRequiredScope, { flow: flows[type], requiredScopes: requiredScopes }, type)));
    }
    return (_jsx(SecuritySchemeItem, { label: translate('openapi.requiredScopes', 'Required scopes'), value: _jsx(Row, { children: requiredScopes.map((scope) => (_jsx(Tag, { className: "tag-grey", children: scope }, scope))) }) }));
}
function OAuthRequiredScope({ flow, requiredScopes, }) {
    const translate = useTranslate();
    return (_jsxs(_Fragment, { children: [_jsx(SecuritySchemeItem, { label: translate('openapi.requiredScopes', 'Required scopes'), value: " " }), requiredScopes.map((scope) => (_jsx(SecuritySchemeItem, { label: _jsx(StyledTag, { className: "tag-grey", children: scope }), value: _jsx(Markdown, { source: flow?.scopes[scope] || '' }) }, scope)))] }));
}
const StyledTag = styled(Tag) `
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  align-self: flex-start;
  padding: 0 var(--spacing-xs);
  border: var(--tag-border-width) var(--tag-border-style) var(--tag-bg-color);
  border-radius: var(--tag-border-radius);
`;
const ScopeHeader = styled.div `
  cursor: pointer;
  display: flex;
  gap: var(--spacing-xxs);
  align-items: center;
  user-select: none;
`;
const Row = styled.div `
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
  word-break: normal;
`;
const ScopesListWrapper = styled.div `
  max-height: ${(props) => (props.isOpen ? '1000px' : '0')};
  opacity: ${(props) => (props.isOpen ? '1' : '0')};
  overflow: hidden;
  transition:
    max-height 0.5s ease-in-out,
    opacity 0.5s ease-in-out;
`;
const AnimatedChevronWrapper = styled.span `
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: ${(props) => (props.isOpen ? 'rotate(90deg)' : 'rotate(0deg)')};
  transition: transform 0.5s ease-in-out;
`;
export const OAuthScopes = memo(OAuthScopesComponent);
//# sourceMappingURL=OAuthScopes.js.map