import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useCallback, useMemo } from 'react';
import { useAtomValue, useAtom } from 'jotai';
import { PanelHeader } from '@redocly/theme/components/Panel/PanelHeader';
import { PayloadSamples } from '../PayloadSamples/index.js';
import { CodeSample } from './CodeSample.js';
import { useCodeSamples } from './useCodeSamples.js';
import { isPayloadSample } from '../../models/index.js';
import { createCodeSampleCopyEvent, createLanguageSwitchEvent } from '../../events/index.js';
import { globalStoreAtom } from '../../jotai/store.js';
import { ServerListDropdown } from '../ServerListDropdown/index.js';
import { LanguageDropdown } from '../Language/index.js';
import { activeMimeNameAtom, languageAtom } from '../../jotai/app.js';
import { Replay } from '../Replay/index.js';
import { CodeBlockPanel } from '../common/index.js';
import { useActiveWithFallback, useTelemetry } from '../../hooks/index.js';
import { operationStore } from '../../jotai/operation.js';
import { styled } from '../../styled-components.js';
function RequestSamplesComponent({ operation, disableFooter, onPanelToggle, ...props }) {
    const telemetry = useTelemetry();
    const [{ activeLanguage, languages }, setLanguage] = useAtom(languageAtom);
    const { samples } = useCodeSamples(operation);
    const { parser, options: { events, corsProxyUrl, hideReplay }, } = useAtomValue(globalStoreAtom);
    const isReplayAvailable = !disableFooter && !operation.isWebhook && !hideReplay && !operation.hideReplay;
    const isLanguagesAvailable = !!languages?.length;
    const localActiveLanguage = useActiveWithFallback(samples, activeLanguage);
    const onSelectLanguage = (selectedItem) => {
        setLanguage(selectedItem);
        telemetry.send({
            type: 'openapi_docs.select_language.clicked',
            payload: { language: selectedItem },
        });
        const selectedSampleDetails = languages?.find((lang) => lang.key === selectedItem);
        if (events?.codeSamplesLanguageSwitch && selectedSampleDetails) {
            const eventPayload = createLanguageSwitchEvent({
                operation: operation,
                sample: {
                    lang: selectedSampleDetails.lang,
                    label: selectedSampleDetails.title,
                },
            });
            events.codeSamplesLanguageSwitch(eventPayload);
        }
    };
    const activeMimeName = useAtomValue(activeMimeNameAtom);
    const { activeExampleName } = useAtomValue(operationStore(operation.pointer));
    const handleCodeSampleCopy = useCallback(({ lang, title }) => () => {
        const event = createCodeSampleCopyEvent({
            operation: operation,
            label: title,
            lang,
            type: 'request',
            activeMimeName,
            activeExampleName,
        });
        telemetry.send({
            type: 'openapi_docs.copy_code_snippet.clicked',
            payload: { snippetType: 'request', language: lang },
        });
        events?.codeSamplesCopy?.(event);
    }, [operation, telemetry, events, activeMimeName, activeExampleName]);
    const handlePanelToggle = useCallback((isExpanded) => {
        onPanelToggle?.(isExpanded, 'request-samples');
    }, [onPanelToggle]);
    const renderSummary = () => {
        return (_jsxs(StyledPanelHeader, { isExpandable: false, withReplay: !isLanguagesAvailable && isReplayAvailable, children: [_jsx(StyledServerListDropdown, { operation: operation }), isLanguagesAvailable && (_jsx(LanguageDropdown, { activeTab: localActiveLanguage, samples: samples, onChange: onSelectLanguage })), !isLanguagesAvailable && isReplayAvailable && (_jsx(Replay, { operation: operation, corsProxyUrl: corsProxyUrl, fullOpenApi: parser.definition }))] }));
    };
    const renderFooter = useMemo(() => {
        if (isReplayAvailable && isLanguagesAvailable) {
            return (_jsx(ReplayWrapper, { children: _jsx(Replay, { operation: operation, corsProxyUrl: corsProxyUrl, fullOpenApi: parser.definition }) }));
        }
    }, [isReplayAvailable, isLanguagesAvailable, operation, corsProxyUrl, parser.definition]);
    const renderSamples = useMemo(() => samples.map((sample) => {
        return sample.key === localActiveLanguage ? (_jsx("div", { children: isPayloadSample(sample) ? (_jsx(PayloadSamples, { content: sample.requestBodyContent, onCopyClick: handleCodeSampleCopy(sample), onPanelToggle: handlePanelToggle, ...props })) : (_jsx(CodeSample, { lang: sample.lang, source: sample.source, externalSample: sample, operation: operation, onCopyClick: handleCodeSampleCopy(sample), ...props })) }, sample.key + operation.id)) : null;
    }), [localActiveLanguage, handleCodeSampleCopy, handlePanelToggle, operation, props, samples]);
    if (languages && !samples.length) {
        return (_jsx(CodeBlockPanel, { className: "panel-request-samples", header: renderSummary, isExpandable: false, expanded: false }));
    }
    return samples.length ? (_jsx(CodeBlockPanel, { className: "panel-request-samples", header: renderSummary, footer: renderFooter, isExpandable: false, children: renderSamples })) : null;
}
export const RequestSamples = memo(RequestSamplesComponent);
const StyledPanelHeader = styled(PanelHeader) `
  flex-wrap: nowrap;
  ${({ withReplay }) => withReplay && 'padding: var(--spacing-xs) var(--spacing-sm);'}
`;
const StyledServerListDropdown = styled(ServerListDropdown) `
  padding-right: var(--spacing-base);
  min-width: 0;
`;
const ReplayWrapper = styled.div `
  display: flex;
  justify-content: flex-end;
  border-top: var(--panel-border);
  padding: var(--spacing-base) var(--spacing-md) var(--spacing-md);
`;
//# sourceMappingURL=RequestSamples.js.map