import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/components/layout/components/header/SettingsMenu.tsx
/**
 * @fileoverview SettingsMenu component
 * @description Settings dropdown menu with theme, language, and cache settings
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { Settings, Check } from 'lucide-react';
import * as LucideIcons from 'lucide-react';
import { Button, BUTTON_VARIANT, DropdownMenu, Stack, DISPLAY, } from '@donotdev/components';
import { useTranslation } from '@donotdev/core';
import { useLanguageSelector, useTheme, Flag, } from '@donotdev/core';
import CacheSettings from './CacheSettings';
import { AuthHeader } from '../../../auth/AuthHeader';
/**
 * SettingsMenu with fixed hooks order and error protection
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
function SettingsMenu({ variant = BUTTON_VARIANT.OUTLINE, } = {}) {
    const { t } = useTranslation('dndev');
    const { languages, currentLanguage, changeLanguage, isLoading } = useLanguageSelector();
    const availableThemes = useTheme('availableThemes');
    const currentThemeName = useTheme('currentTheme');
    const setTheme = useTheme('setTheme');
    const getIcon = (iconName) => {
        if (!iconName)
            return LucideIcons.Palette;
        const cleanIconName = iconName.replace(/['"]/g, '');
        return LucideIcons[cleanIconName] || LucideIcons.Palette;
    };
    const themeItems = availableThemes.map((themeInfo) => {
        const Icon = getIcon(themeInfo.meta?.icon);
        const isCurrent = themeInfo.name === currentThemeName;
        return {
            label: themeInfo.displayName || themeInfo.name,
            icon: Icon,
            onClick: () => setTheme(themeInfo.name),
            checked: isCurrent,
        };
    });
    const languageItems = languages.map((language) => {
        const isActive = language.id === currentLanguage;
        return {
            label: language.name,
            onClick: () => changeLanguage(language.id),
            disabled: isLoading,
            checked: isActive,
            className: isActive ? 'bg-accent' : undefined,
            iconEnd: isActive && !isLoading ? Check : undefined,
            children: (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx(Flag, { code: language.flagCode || language.id, title: `${language.name} flag` }), _jsx("span", { children: language.name }), isLoading && isActive && (_jsx("div", { style: { marginInlineStart: 'auto' }, children: _jsx("div", { style: {
                                width: '0.5rem',
                                height: '0.5rem',
                                borderRadius: '50%',
                                backgroundColor: 'var(--primary)',
                            } }) }))] })),
        };
    });
    const items = [
        {
            label: t('auth.title', 'Authentication'),
            subContent: _jsx(AuthHeader, { display: DISPLAY.COMPACT }),
        },
        {
            label: t('settings.theme', 'Theme'),
            subItems: themeItems,
        },
        {
            label: t('settings.language', 'Language'),
            subItems: languageItems,
        },
        {
            label: t('settings.clearCache.title', 'Clear Cache'),
            subContent: _jsx(CacheSettings, {}),
        },
    ];
    return (_jsx(DropdownMenu, { trigger: _jsx(Button, { variant: variant, "aria-label": t('settings.title', 'Settings'), icon: Settings }), items: items, contentWidth: "14rem", contentAlign: "end" }));
}
export default SettingsMenu;
