import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment } from 'react';
import { SecurityIcon } from '@redocly/theme/icons/SecurityIcon/SecurityIcon';
import { Panel } from '@redocly/theme/components/Panel/Panel';
import { Button } from '@redocly/theme/components/Button/Button';
import { useTranslate } from '../../hooks/index.js';
import { styled } from '../../styled-components.js';
export function SecurityButton({ securities, onClick }) {
    const translate = useTranslate();
    const securityHeader = () => {
        return (_jsxs(SecurityHeader, { children: [_jsx(SecurityIcon, {}), _jsx(Title, { children: translate('openapi.security', 'Security') }), _jsx(ViewDetailsButton, { onClick: onClick, variant: "link", children: translate('openapi.viewSecurityDetails', 'View details') })] }));
    };
    return (_jsx(SecurityPanel, { header: securityHeader, isExpandable: false, children: _jsx(SecurityList, { children: securities.map((security, secIndex) => {
                const isMultiple = securities.length > 1 && security.schemes.length > 1;
                const schemeNodes = security.schemes.map(({ id }, index) => (_jsxs(Fragment, { children: [id, index < security.schemes.length - 1 && _jsx(Conjunction, { children: " and " })] }, id)));
                return (_jsxs(Fragment, { children: [isMultiple ? '(' : '', schemeNodes, isMultiple ? ')' : '', secIndex < securities.length - 1 && _jsx(Conjunction, { children: " or " })] }, secIndex));
            }) }) }));
}
const SecurityPanel = styled(Panel) `
  margin-top: var(--spacing-base);
  border: var(--panel-border);
  border-radius: var(--panel-border-radius);
`;
const SecurityHeader = styled.div `
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
  color: var(--link-color-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--layer-color);
  border-bottom: var(--panel-border);
  border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
`;
const ViewDetailsButton = styled(Button) `
  margin-left: auto;
  font-size: var(--font-size-sm);
`;
const Title = styled.span `
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-primary);
`;
const SecurityList = styled.div `
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--text-color-primary);
`;
const Conjunction = styled.span `
  color: var(--text-color-description);
`;
//# sourceMappingURL=SecurityButton.js.map