import { useState, useEffect, useCallback } from 'react';

import { defineMessages, useIntl } from 'react-intl';

import classNames from 'classnames';

import DarkModeIcon from '@/material-icons/400-24px/toggle_on.svg?react';
import LightModeIcon from '@/material-icons/400-24px/toggle_off.svg?react';

const messages = defineMessages({
  theme: { id: 'theme_selector.theme', defaultMessage: 'Theme' },
  dark: { id: 'theme_selector.dark', defaultMessage: 'Dark' },
  light: { id: 'theme_selector.light', defaultMessage: 'Light' },
});

export const ThemeLanguageSelector: React.FC = () => {
  const intl = useIntl();
  const [theme, setTheme] = useState<'dark' | 'light'>(() => {
    if (typeof window !== 'undefined') {
      const stored = localStorage.getItem('theme');
      if (stored) return stored as 'dark' | 'light';
      const htmlScheme = document.documentElement.getAttribute('data-color-scheme');
      return htmlScheme === 'light' ? 'light' : 'dark';
    }
    return 'dark';
  });
  const [showMenu, setShowMenu] = useState(false);

  useEffect(() => {
    const htmlElement = document.documentElement;
    if (theme === 'light') {
      htmlElement.setAttribute('data-color-scheme', 'light');
    } else {
      htmlElement.removeAttribute('data-color-scheme');
    }
    localStorage.setItem('theme', theme);
  }, [theme]);

  const handleThemeToggle = useCallback(() => {
    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
  }, []);

  return (
    <div className='theme-selector'>
      <button
        className='theme-selector__button'
        onClick={() => setShowMenu(!showMenu)}
        aria-label={intl.formatMessage(messages.theme)}
        title={intl.formatMessage(messages.theme)}
      >
        {theme === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
      </button>

      {showMenu && (
        <div className='theme-selector__dropdown'>
          <div className='theme-selector__section'>
            <h4 className='theme-selector__section-title'>
              {intl.formatMessage(messages.theme)}
            </h4>
            <div className='theme-selector__options'>
              <button
                className={classNames('theme-selector__option', { active: theme === 'dark' })}
                onClick={() => {
                  handleThemeToggle();
                  setShowMenu(false);
                }}
              >
                <DarkModeIcon />
                <span>{intl.formatMessage(messages.dark)}</span>
              </button>
              <button
                className={classNames('theme-selector__option', { active: theme === 'light' })}
                onClick={() => {
                  handleThemeToggle();
                  setShowMenu(false);
                }}
              >
                <LightModeIcon />
                <span>{intl.formatMessage(messages.light)}</span>
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};