import{jsx as t,jsxs as n}from"react/jsx-runtime";import{Fragment as h,useState as f,useRef as u}from"react";import{useOutsideClick as v,useFocusTrap as x}from"@redocly/theme/core/openapi";import{Button as b}from"@redocly/theme/components/Button/Button";import{SecurityIcon as y}from"@redocly/theme/icons/SecurityIcon/SecurityIcon";import{Segmented as S}from"@redocly/theme/components/Segmented/Segmented";import{CloseIcon as w}from"@redocly/theme/icons/CloseIcon/CloseIcon";import{Typography as z}from"@redocly/theme/components/Typography/Typography";import{SecurityFlow as j}from"./SecurityFlow.js";import{Divider as k}from"./Divider.js";import{useTranslate as C}from"../../hooks/index.js";import{styled as e}from"../../styled-components.js";function J({securities:r,onClose:s}){const c=C(),[l,d]=f(0),i=u(null),{schemes:p}=r[l]||{};v(i,s),x(i);const m=r.map(({schemes:o},a)=>({label:o.map(({id:g})=>g).join(" and "),value:a}));return t(F,{children:n(T,{ref:i,tabIndex:0,children:[t(I,{onClick:s,"data-testid":"close",variant:"ghost",icon:t(w,{})}),n(B,{children:[t(y,{size:"24px"}),c("openapi.security","Security")]}),t(S,{value:l,onChange:({value:o})=>d(o),options:m}),p.map((o,a)=>n(h,{children:[t(j,{...o,securities:r}),a!==p.length-1&&t(k,{label:"and"})]},o.id))]})})}const T=e.div`
  background: var(--bg-color);
  box-shadow: var(--bg-raised-shadow);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  width: 720px;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  overflow-y: scroll;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
  .tag-grey span {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }
`,F=e.div`
  background: var(--bg-color-modal-overlay);
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-index-popover);
  left: 0;
  top: 0;
  pointer-events: auto;
`,I=e(b)`
  position: absolute;
  right: var(--spacing-md);
  top: var(--spacing-md);
`,B=e(z)`
  display: flex;
  align-items: center;
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  margin-bottom: var(--spacing-lg);
  svg {
    margin-right: var(--spacing-xs);
  }
`;export{J as SecurityModal};
