import { jsx as _jsx } from "react/jsx-runtime";
import { memo, useCallback } from 'react';
import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
import { SelectOrLabel } from '../SelectOrLabel/index.js';
import { MediaTypesSwitch } from '../MediaTypeSwitch/index.js';
import { SelectWrapper } from '../PayloadSamples/index.js';
import { Example } from './Example.js';
import { MimeLabel, Select } from '../common/index.js';
import { styled } from '../../styled-components.js';
function CodeSampleComponent({ onCopyClick, ...props }) {
    const mimeContent = props.operation.requestBody?.content;
    const renderSelect = useCallback((props) => {
        const hasSelect = (mimeContent?.mediaTypes?.length ?? 0) > 1;
        return hasSelect ? (_jsx(SelectWrapper, { children: _jsx(SelectOrLabel, { Label: MimeLabel, Select: Select, variant: "dark", fullWidth: true, ...props }) })) : null;
    }, [mimeContent]);
    const renderSample = useCallback((exampleName) => {
        return props.source ? (_jsx(StyledCodeBlock, { lang: props.lang, source: props.source, header: {
                className: 'code-block-header',
                controls: {
                    copy: {
                        onClick: onCopyClick,
                    },
                },
            } })) : (_jsx(StyledCodeBlock, { lang: props.lang, externalSource: {
                sample: props.externalSample,
                exampleName,
                operation: props.operation,
                pathParams: props.pathParams,
                properties: props.properties,
            }, header: {
                className: 'code-block-header',
                controls: {
                    copy: {
                        onClick: onCopyClick,
                    },
                },
            } }));
    }, [
        onCopyClick,
        props.externalSample,
        props.lang,
        props.operation,
        props.pathParams,
        props.properties,
        props.source,
    ]);
    if (mimeContent === undefined || props.source != undefined) {
        return renderSample();
    }
    return (_jsx(MediaTypesSwitch, { content: mimeContent, renderSelect: renderSelect, children: (mediaType) => (_jsx(Example, { mediaType: mediaType, mediaContent: mimeContent, renderSample: renderSample })) }));
}
export const CodeSample = memo(CodeSampleComponent);
const StyledCodeBlock = styled(CodeBlock) `
  border: none;
  margin: 0;

  .code-block-header {
    border-bottom: 0;
    padding-right: var(--spacing-sm);
  }
`;
//# sourceMappingURL=CodeSample.js.map