import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
import { PanelItemDescription, Title } from '../PanelItem/index.js';
import { ViewNested } from '../ViewNested/index.js';
import { Tag } from '../common/index.js';
import { Markdown } from '../Markdown/index.js';
import { styled } from '../../styled-components.js';
export const ServerList = ({ servers, path, translate }) => (_jsx(ItemsList, { children: servers.map((server) => {
        const url = server.url + path;
        const propertyLength = Object.keys(server.variables || {}).length;
        const keyword = propertyLength === 1 ? 'variable' : 'variables';
        const pluralOrSingular = `${propertyLength || ''} ${translate(`openapi.${keyword}`, keyword)}`;
        {
            /* TODO: highlight server variables, e.g. https://{user}.test.com */
        }
        return (_jsxs("div", { children: [_jsx(PanelItemDescription, { children: server.description }), _jsxs(TitleWrap, { children: [_jsx(Title, { suppressHydrationWarning: true, children: url }), _jsx(CopyButton, { data: url }, url)] }), server.variables && (_jsx(ViewNested, { expandText: `${translate('openapi.actions.show', 'Show')} ${pluralOrSingular}`, hideText: `${translate('openapi.actions.hide', 'Hide')} ${pluralOrSingular}`, expandByDefault: false, expandable: true, hideDivider: true, children: _jsx(ServerVariablesContainer, { children: Object.entries(server.variables || {}).map(([varName, varValue]) => (_jsxs(ServerVariableContainer, { children: [_jsx(ServerVariableName, { children: varName }), _jsxs(Variable, { children: [translate('openapi.default', 'Default'), ' ', _jsx(StyledTag, { children: varValue.default })] }), _jsx(Description, { source: varValue.description }), varValue.enum && (_jsxs(Variable, { children: [translate('openapi.enum', 'Enum'), ' ', _jsx(TagWrapper, { children: varValue.enum.map((el) => (_jsx(StyledTag, { children: el }, el))) })] }))] }, varName))) }) }))] }, server.url));
    }) }));
const ItemsList = styled.div `
  & > div {
    border-bottom: 1px solid var(--border-color-secondary);
    margin-bottom: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
  }

  & > div:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
`;
const ServerVariablesContainer = styled.div `
  padding-left: var(--spacing-xxs);
  & > div {
    border-bottom: 1px solid var(--border-color-secondary);
    margin-bottom: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
  }

  & > div:first-child {
    margin-top: var(--spacing-sm);
    padding-top: 0;
  }

  & > div:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
`;
const ServerVariableContainer = styled.div `
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
`;
const Description = styled(Markdown) `
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--text-color-primary);
`;
const Variable = styled.span `
  display: flex;
  gap: var(--spacing-xxs);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--text-color-primary);
`;
const ServerVariableName = styled(Variable) `
  padding-bottom: var(--spacing-xxs);
  font-weight: var(--font-weight-semibold);
`;
const TagWrapper = styled.span `
  display: flex;
  gap: var(--spacing-xxs);
  flex-wrap: wrap;
`;
const StyledTag = styled(Tag) `
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
`;
const TitleWrap = styled.div `
  display: flex;
  justify-content: space-between;
  align-items: center;
`;
//# sourceMappingURL=ServerList.js.map