"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.SecurityModal=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme"),SecurityFlow_1=require("./SecurityFlow"),Divider_1=require("./Divider");function SecurityModal({securities:e,onClose:t}){const[i,r]=(0,react_1.useState)(0),s=(0,react_1.useRef)(null),{schemes:o}=e[i]||{};(0,theme_1.useOutsideClick)(s,t),(0,theme_1.useFocusTrap)(s);const a=e.map((({schemes:e},t)=>({label:e.map((({id:e})=>e)).join(" and "),value:t})));return(0,jsx_runtime_1.jsx)(StyledBackground,{children:(0,jsx_runtime_1.jsxs)(Wrapper,{ref:s,tabIndex:0,children:[(0,jsx_runtime_1.jsx)(Close,{onClick:t,"data-testid":"close",variant:"ghost",icon:(0,jsx_runtime_1.jsx)(theme_1.CloseIcon,{})}),(0,jsx_runtime_1.jsxs)(Title,{children:[(0,jsx_runtime_1.jsx)(theme_1.SecurityIcon,{size:"24px"}),"Security"]}),(0,jsx_runtime_1.jsx)(theme_1.Segmented,{value:i,onChange:({value:e})=>r(e),options:a}),o.map(((t,i)=>(0,jsx_runtime_1.jsxs)(react_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(SecurityFlow_1.SecurityFlow,Object.assign({},t,{securities:e})),i!==o.length-1&&(0,jsx_runtime_1.jsx)(Divider_1.Divider,{label:"and"})]},t.id)))]})})}exports.SecurityModal=SecurityModal;const Wrapper=styled_components_1.default.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);
  }
`,StyledBackground=styled_components_1.default.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;
`,Close=(0,styled_components_1.default)(theme_1.Button)`
  position: absolute;
  right: var(--spacing-md);
  top: var(--spacing-md);
`,Title=(0,styled_components_1.default)(theme_1.Typography)`
  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);
  }
`;
//# sourceMappingURL=SecurityModal.js.map