import{jsx as o,jsxs as c,Fragment as g}from"react/jsx-runtime";import{memo as f,useState as u}from"react";import{ChevronRightIcon as S}from"@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon";import{Markdown as h}from"../Markdown/index.js";import{SecuritySchemeItem as l}from"./SecuritySchemeItem.js";import{Tag as v}from"./styled.js";import{useTranslate as x}from"../../hooks/index.js";import{getOptionalScopes as y,getRequiredScopes as O}from"./helper.js";import{styled as t}from"../../styled-components.js";import{ScopeTagWithTooltip as b}from"./ScopeTagWithTooltip.js";import{RequiredScopesList as w}from"./RequiredScopesList.js";import{normalizeScopes as C}from"../../utils/security-scope.js";const j=24;function q({id:e,securities:n,flow:a,flows:r}){const i=O(e,n);return a?o(z,{flow:a,requiredScopes:i}):o(I,{children:o(w,{schemeId:e,securities:n,flows:r})})}function z({flow:e,requiredScopes:n}){const a=x(),[r,i]=u(!1),m=Object.keys(e.scopes||{}),d=C(n),p=y(d,m);return p.length===0?null:c(g,{children:[o(l,{label:c(R,{onClick:()=>{i(s=>!s)},children:[a(r?"openapi.hideOptionalScopes":"openapi.showOptionalScopes",r?"Hide optional scopes":"Show optional scopes"),o(_,{isOpen:r,children:o(S,{size:"var(--font-size-base)",color:"var(--tree-content-color-default)"})})]}),value:" "}),o(T,{isOpen:r,children:p.map(s=>o(l,{label:o(b,{className:"tag-grey",text:s,maxChars:j,TagComponent:A,compact:!0}),value:o(W,{children:o(h,{source:e.scopes[s]||""})})},s))})]})}const A=t(v)`
  font-family: var(--font-family-base);
  font-size: var(--font-size-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);
  color: var(--color-warm-grey-8);
`,R=t.div`
  cursor: pointer;
  display: flex;
  gap: var(--spacing-xxs);
  align-items: center;
  user-select: none;
`,T=t.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;
`,_=t.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;
`,I=t.div`
  margin-top: var(--spacing-xs);
`,W=t.div`
  p {
    margin-bottom: 0;
  }
`,G=f(q);export{G as OAuthScopes};
