import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { memo } from 'react';
import { Markdown } from '../Markdown/index.js';
import { DescriptionEnumsBlock } from './styled.js';
import { ToggleButton } from '../common/index.js';
import { styled } from '../../styled-components.js';
const EnumValueStyled = styled.td `
  word-wrap: break-word;
  font-size: var(--md-table-font-size);
`;
const DescriptionValueStyled = styled.td `
  & p,
  p:only-of-type {
    margin: 0;
  }
`;
export function DescriptionEnumsComponent({ enums, toggle, showToggleButton, toggleButtonText, type, translate, }) {
    return (_jsx(_Fragment, { children: _jsx(DescriptionEnumsBlock, { children: _jsxs("table", { className: "md", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsxs("th", { style: { width: '30%' }, children: [type === 'array' ? translate('openapi.items', 'Items') : '', ' ', enums.length === 1
                                            ? translate('openapi.value', 'Value')
                                            : `${translate('openapi.enum', 'Enum')} ${translate('openapi.value', 'Value')}`] }), _jsx("th", { children: translate('openapi.description', 'Description') })] }) }), _jsx("tbody", { children: enums.map(({ description, value }) => {
                            return (_jsxs("tr", { children: [_jsx(EnumValueStyled, { children: value }), _jsx(DescriptionValueStyled, { children: _jsx(Markdown, { source: description }) })] }, value));
                        }) }), showToggleButton ? (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { colSpan: 2, children: _jsx(ToggleButton, { onClick: toggle, children: toggleButtonText }) }) }) })) : null] }) }) }));
}
export const DescriptionEnums = memo(DescriptionEnumsComponent);
//# sourceMappingURL=DescriptionEnums.js.map