import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useMemo } from 'react';
import { menuHelpers } from '../Menu';
import { useI18n, useTestIds } from '../../hooks';
import Flex from '../Flex';
import { ThemeOverride } from '../Configuration';
import MenuButton from '../MenuButton';
import { withTestIds } from '../../utils';
import Icon from '../Icon';
import { getThemeSwitcherTestIds } from './ThemeSwitcher.test-ids';
const ThemeModeIconMap = {
    light: 'sun',
    dark: 'moon',
    system: 'circle-mixed-left'
};
const ThemeSwitcher = withTestIds(function ThemeSwitcher({ testId, themeMode, onThemeModeChange }) {
    const t = useI18n();
    const testIds = useTestIds(testId, getThemeSwitcherTestIds);
    const [items, setItems] = useState(() => [
        {
            id: 'light',
            primary: 'Light',
            visual: _jsx(Icon, { name: ThemeModeIconMap.light, set: 'budicon' }),
            selected: themeMode === 'light'
        },
        {
            id: 'dark',
            primary: 'Dark',
            visual: _jsx(Icon, { name: ThemeModeIconMap.dark, set: 'budicon' }),
            selected: themeMode === 'dark'
        },
        {
            id: 'system',
            primary: 'System',
            visual: _jsx(Icon, { name: ThemeModeIconMap.system, set: 'budicon' }),
            selected: !themeMode || themeMode === 'system'
        }
    ]);
    const handleMenuItemClick = (id) => {
        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
        onThemeModeChange?.(id);
    };
    const selectedThemeIcon = useMemo(() => {
        const selected = menuHelpers.getSelected(items)[0];
        return selected
            ? ThemeModeIconMap[selected.id]
            : ThemeModeIconMap.system;
    }, [items]);
    return (_jsx(Flex, { container: {
            alignItems: 'center'
        }, children: _jsx(ThemeOverride, { theme: { base: { 'icon-set': 'budicon' } }, children: _jsx(MenuButton, { text: t('theme_mode'), "data-testid": testIds.root, icon: selectedThemeIcon, iconOnly: true, variant: 'simple', menu: {
                    mode: 'single-select',
                    items,
                    onItemClick: handleMenuItemClick
                } }) }) }));
}, getThemeSwitcherTestIds);
export default ThemeSwitcher;
//# sourceMappingURL=ThemeSwitcher.js.map