import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { MimeLabel, Container, Select } from '../common/index.js';
import { SelectOrLabel } from '../SelectOrLabel/index.js';
import { normalizeText } from '../../utils/index.js';
import { useTelemetry } from '../../hooks/index.js';
export const ExampleSwitch = ({ exampleKey, examples, onChange, className, }) => {
    const telemetry = useTelemetry();
    const examplesKeys = Object.keys(examples);
    const defaultIdx = exampleKey ? examplesKeys.indexOf(exampleKey) : 0;
    const [activeIdx, setActiveIdx] = useState(defaultIdx > -1 ? defaultIdx : 0);
    useEffect(() => setActiveIdx(defaultIdx > -1 ? defaultIdx : 0), [exampleKey, defaultIdx]);
    const options = examplesKeys.map((name, idx) => ({
        value: normalizeText(examples[name].summary) || name,
        idx,
    }));
    const handleChange = ({ idx }) => {
        telemetry.send({
            type: 'openapi_docs.examples_switcher.clicked',
            payload: {
                example: examplesKeys[idx],
                numberOfExamples: examplesKeys.length,
            },
        });
        setActiveIdx(idx);
        onChange(examplesKeys[idx]);
    };
    if (options.length < 2) {
        return null;
    }
    return (_jsx(Container, { "data-testid": "example-switch", className: className, children: _jsx(SelectOrLabel, { Select: Select, Label: MimeLabel, variant: "dark", fullWidth: true, options: options, value: options[activeIdx]?.value, onChange: handleChange }) }));
};
//# sourceMappingURL=ExampleSwitch.js.map