import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useMemo } from 'react';
import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
import { LanguageItem } from './LanguageItem.js';
import { DropdownTriggerButton, StyledDropdownMenuItem } from './styled.js';
export const LanguageDropdown = ({ samples, activeTab, onChange, trigger, width, withArrow = true, withCheckmark = true, withIcon = true, }) => {
    const handleAction = useCallback((value) => () => {
        const selectedSample = samples.find(({ key }) => key === value.key);
        if (selectedSample) {
            onChange(selectedSample.key);
        }
    }, [onChange, samples]);
    const items = useMemo(() => samples.map((item) => {
        return (_jsx(StyledDropdownMenuItem, { "$width": width, onAction: handleAction(item), children: _jsx(LanguageItem, { item: item, active: activeTab === item.key, withCheckmark: withCheckmark, withIcon: withIcon }) }, item.key));
    }), [activeTab, handleAction, samples, width, withCheckmark, withIcon]);
    const activeSample = samples.find(({ key }) => key === activeTab);
    const dropdownTrigger = trigger || (_jsx(DropdownTriggerButton, { variant: "ghost", children: activeSample?.title }));
    return items.length > 1 ? (_jsx(Dropdown, { trigger: dropdownTrigger, withArrow: withArrow, alignment: "end", children: _jsx(DropdownMenu, { children: items }) })) : (dropdownTrigger);
};
//# sourceMappingURL=LanguageDropdown.js.map