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