import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
import Moon from '../icons/Moon';
import Sun from '../icons/Sun';
import SystemIcon from '../icons/System';

export type ThemeType = 'light' | 'dark';
export type ThemeSelected = 'light' | 'dark' | 'system';

interface ThemeMenuProps {
    theme: ThemeType;
    themeSelected: ThemeSelected;
    onThemeChange: (theme: ThemeSelected) => void;
}

export const ThemeMenu = ({ theme, themeSelected, onThemeChange }: ThemeMenuProps) => {
    const { t } = useTranslation();
    const [showThemeMenu, setShowThemeMenu] = useState(false);

    const getThemeIcon = () => {
        if (themeSelected === 'system') {
            return <SystemIcon className='text-secondary'/>;
        }
        if (theme === 'light') {
            return <Sun className='text-secondary'/>;
        }
        return <Moon className='text-secondary'/>;
    };

    const handleThemeSelect = (selectedTheme: ThemeSelected) => {
        onThemeChange(selectedTheme);
        setShowThemeMenu(false);
    };

    return (
        <div className="relative">
            <button 
                onClick={() => setShowThemeMenu(!showThemeMenu)} 
                className="hover:drop-shadow-[0_0_8px_currentColor] transition-all flex flex-row p-2 hover:bg-secondary/10 rounded"
            >
                {getThemeIcon()}
            </button>
            
            {showThemeMenu && (
                <div className="absolute right-0 top-12 bg-primary border border-secondary/20 rounded-lg shadow-xl z-50 min-w-[180px] overflow-hidden">
                    {/* Light Theme */}
                    <button 
                        onClick={() => handleThemeSelect('light')} 
                        className={clsx(
                            "w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center gap-3",
                            themeSelected === 'light' && "bg-accent/20 text-accent"
                        )}
                    >
                        <Sun height={16} width={16} /> {t('theme.light')}
                    </button>
                    
                    {/* Dark Theme */}
                    <button 
                        onClick={() => handleThemeSelect('dark')} 
                        className={clsx(
                            "w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center gap-3",
                            themeSelected === 'dark' && "bg-accent/20 text-accent"
                        )}
                    >
                        <Moon height={16} width={16} /> {t('theme.dark')}
                    </button>
                    
                    {/* System Theme */}
                    <button 
                        onClick={() => handleThemeSelect('system')} 
                        className={clsx(
                            "w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center gap-3",
                            themeSelected === 'system' && "bg-accent/20 text-accent"
                        )}
                    >
                        <SystemIcon height={16} width={16} /> {t('theme.system')}
                    </button>
                </div>
            )}
        </div>
    );
};
