import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{memo,useState}from"react";import styled from"styled-components";import{ChevronRightIcon}from"@redocly/theme";import{Markdown}from"../Markdown";import{SecuritySchemeItem}from"./SecuritySchemeItem";import{Tag}from"./styled";import{useTranslate}from"../../hooks";import{getRequiredScopes}from"./helper";function OAuthOptionalScopesComponent({flow:e}){const t=Object.keys((null==e?void 0:e.scopes)||{}),o=useTranslate(),[r,s]=useState(!1);if(!t.length)return null;return _jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:_jsxs(ScopeHeader,{onClick:()=>{s((e=>!e))},children:[o(r?"openapi.hideOptionalScopes":"openapi.showOptionalScopes",r?"Hide optional scopes":"Show optional scopes"),_jsx(AnimatedChevronWrapper,{isOpen:r,children:_jsx(ChevronRightIcon,{size:"var(--font-size-base)",color:"var(--tree-content-color-default)"})})]}),value:" "}),_jsx(ScopesListWrapper,{isOpen:r,children:t.map((t=>_jsx(SecuritySchemeItem,{label:_jsx(StyledTag,{className:"tag-grey",children:t}),value:_jsx(Markdown,{source:(null==e?void 0:e.scopes[t])||""})},t)))})]})}function OAuthRequiredScopesComponent({id:e,securities:t,flow:o}){const r=getRequiredScopes(e,t),s=useTranslate();return r.length?_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:s("openapi.requiredScopes","Required scopes"),value:" "}),_jsx(Row,{children:r.map((e=>_jsx(SecuritySchemeItem,{label:_jsx(StyledTag,{className:"tag-grey",children:e}),value:_jsx(Markdown,{source:(null==o?void 0:o.scopes[e])||""})},e)))})]}):null}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);
`,ScopeHeader=styled.div`
  cursor: pointer;
  display: flex;
  gap: var(--spacing-xxs);
  align-items: center;
  user-select: none;
`,Row=styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
  word-break: normal;
`,ScopesListWrapper=styled.div`
  max-height: ${e=>e.isOpen?"1000px":"0"};
  opacity: ${e=>e.isOpen?"1":"0"};
  overflow: hidden;
  transition:
    max-height 0.5s ease-in-out,
    opacity 0.5s ease-in-out;
`,AnimatedChevronWrapper=styled.span`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: ${e=>e.isOpen?"rotate(90deg)":"rotate(0deg)"};
  transition: transform 0.5s ease-in-out;
`;export const OAuthOptionalScopes=memo(OAuthOptionalScopesComponent);export const OAuthRequiredScopes=memo(OAuthRequiredScopesComponent);
//# sourceMappingURL=OAuthScopes.js.map