import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from 'react';
import merge from 'deepmerge';
import { Markdown } from '../Markdown/index.js';
import { Example } from './Example.js';
import { ExampleSwitch, useExampleKey } from '../Samples/index.js';
import { arrayMergeStrategy } from '../../services/utils.js';
import { StyledCodeBlock } from './styled.js';
import { useTranslate } from '../../hooks/index.js';
import { styled } from '../../styled-components.js';
function MediaTypeSamplesComponent({ mediaType, properties, onChange, onCopyClick, onPanelToggle, }) {
    const examples = mediaType.examples || mediaType.formExamples || {};
    const mimeType = mediaType.name;
    const examplesKeys = Object.keys(examples);
    const translate = useTranslate();
    const { exampleKey } = useExampleKey(mediaType.operation, examples);
    const example = examplesKeys.length === 1 ? Object.values(examples)[0] : examples[exampleKey];
    if (!examplesKeys.length) {
        return (_jsx(StyledCodeBlock, { lang: "clike", source: translate('openapi.noResponseExample', 'No response example'), header: { controls: false } }));
    }
    // properties will be passed in developer portal
    const mergedExamples = properties
        ? {
            ...example,
            value: merge(example.value, properties, {
                arrayMerge: arrayMergeStrategy,
            }),
        }
        : example;
    const description = mergedExamples.description;
    return (_jsxs(_Fragment, { children: [_jsx(ExampleSwitch, { examples: examples, exampleKey: exampleKey, onChange: onChange }), description && _jsx(StyledMarkdown, { source: description }), _jsx(Example, { example: mergedExamples, mimeType: mimeType, onCopyClick: onCopyClick, onPanelToggle: onPanelToggle })] }));
}
const StyledMarkdown = styled(Markdown) `
  margin: 0 var(--spacing-md) var(--spacing-sm);
`;
export const MediaTypeSamples = memo(MediaTypeSamplesComponent);
//# sourceMappingURL=MediaTypeSamples.js.map