import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useCallback } from 'react';
import { useAtom, useAtomValue } from 'jotai';
import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
import { HttpVerb } from '../common/index.js';
import { PathWrapper, Path, StyledCopyButton, StyledDropdownMenuItem } from './styled.js';
import { PanelItem } from '../PanelItem/index.js';
import { joinWithSeparator } from '../../services/index.js';
import { replaceVariables } from '../../utils/index.js';
import { environmentAtom } from '../../jotai/app.js';
import { useActiveWithFallback, useTelemetry } from '../../hooks/index.js';
import { getServerEnvName } from '../../utils/environments.js';
import { createTargetServerSwitchEvent } from '../../events/index.js';
import { globalStoreAtom } from '../../jotai/store.js';
export const ServerListDropdown = ({ operation, className, }) => {
    const telemetry = useTelemetry();
    const [[environment], setEnvironment] = useAtom(environmentAtom);
    const { options: { events }, } = useAtomValue(globalStoreAtom);
    const activeServerUrl = useActiveWithFallback(operation.servers.map((s) => ({
        ...s,
        key: s.url,
    })), environment.server);
    const onCopyClick = useCallback((e) => {
        e.stopPropagation();
    }, []);
    const handleAction = useCallback((server) => () => {
        if (operation.servers.length === 1) {
            return; // do not override environment if there is only one server
        }
        setEnvironment({ environment: getServerEnvName(server) });
        telemetry.send({
            type: 'openapi_docs.switch_servers.clicked',
            payload: { server: getServerEnvName(server) },
        });
        if (events?.targetServerSwitch && server) {
            const eventPayload = createTargetServerSwitchEvent({
                operation: operation,
                serverUrl: server.url,
            });
            events.targetServerSwitch(eventPayload);
        }
    }, [operation, setEnvironment, telemetry, events]);
    const items = useMemo(() => {
        return operation.servers.map((server) => {
            const url = joinWithSeparator(replaceVariables(server), operation.path);
            return (_jsx(StyledDropdownMenuItem, { onAction: handleAction(server), children: _jsx(PanelItem, { header: server.description, title: url, actions: [
                        _jsx(StyledCopyButton, { data: url, toasterPlacement: "left", onCopyClick: onCopyClick }, url),
                    ], active: server.url === activeServerUrl, withCheckmark: true }) }, url));
        });
    }, [operation.servers, operation.path, handleAction, onCopyClick, activeServerUrl]);
    return (_jsx(Dropdown, { className: className, trigger: _jsxs(PathWrapper, { variant: "ghost", children: [_jsx(HttpVerb, { color: operation.httpVerb, children: operation.httpVerb }), _jsx(Path, { children: operation.path })] }), withArrow: true, children: _jsx(DropdownMenu, { children: items }) }));
};
//# sourceMappingURL=ServerListDropdown.js.map