import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { Button } from '@redocly/theme/components/Button/Button';
import { Markdown } from '../../Markdown/index.js';
import { ExampleValue } from '../Fields/index.js';
import { useTranslate } from '../../../hooks/index.js';
import { styled } from '../../../styled-components.js';
const MAX_EXAMPLE_LENGTH = 150;
export function ExpandableExample({ value }) {
    const translate = useTranslate();
    const [isExpanded, setIsExpanded] = useState(false);
    const truncatedValue = useMemo(() => value.slice(0, MAX_EXAMPLE_LENGTH), [value]);
    const toggleExpand = () => {
        setIsExpanded(!isExpanded);
    };
    return (_jsxs(Container, { children: [_jsx(Markdown, { source: isExpanded ? value : truncatedValue }), (value !== truncatedValue || isExpanded) && (_jsx(ButtonWrap, { children: _jsx(Button, { variant: "link", size: "small", onClick: toggleExpand, children: isExpanded
                        ? translate('openapi.hideExample', 'Hide example')
                        : translate('openapi.showExample', 'Show example') }) }))] }));
}
const Container = styled(ExampleValue) `
  display: inline;

  & * {
    display: inline;
  }
`;
const ButtonWrap = styled.span `
  margin-left: var(--spacing-xs);
`;
//# sourceMappingURL=ExpandableExample.js.map