'use client';

import SvgIcon from '@/components/SvgIcon';
import { setLocale } from '@/utils/common';
import { getCountry } from '@workspace/airo-ui/utils';
import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';

const languages = {
  'cs-CZ': 'Čeština',
  'de-DE': 'Deutsch',
  'en-US': 'English',
  'es-ES': 'Español',
  'es-MX': 'Español (México)',
  'fa-IR': 'فارسی',
  'fi-FI': 'Suomi',
  'fr-FR': 'Français',
  'hi-IN': 'हिन्दी',
  'hu-HU': 'Magyar',
  'ja-JP': '日本語',
  'ko-KR': '한국어',
  'no-NO': 'Norsk',
  'pl-PL': 'Polski',
  'pt-BR': 'Português (Brasil)',
  'ro-RO': 'Română',
  'ru-RU': 'Русский',
  'th-TH': 'ไทย',
  'tr-TR': 'Türkçe',
  'uk-UA': 'Українська',
  'vi-VN': 'Tiếng Việt',
  'zh-CN': '简体中文',
  // 'zh-HK': '繁體中文',
} as const;

export default function LanguageSwitch() {
  const locale = useLocale();
  const country = getCountry(locale);
  const router = useRouter();

  const handleLanguageChange = (value: string) => {
    setLocale(value);
    router.refresh();
  };

  return (
    <div>
      <div
        className='flex items-center rounded-full'
        onClick={() => {
          console.log(locale, 111);
          if (locale === 'en-US') {
            handleLanguageChange('zh-CN');
          } else {
            handleLanguageChange('en-US');
          }
        }}
      >
        <SvgIcon
          name={locale === 'en-US' ? 'language-zh' : 'language'}
          className={'cursor-pointer text-[#EAEAEA] hover:text-[#B5C9E2]'}
        />
        <span className='sr-only'>{languages[locale as keyof typeof languages]}</span>
      </div>
    </div>
    /*<Select defaultValue={locale} onValueChange={handleLanguageChange}>
      <SelectTrigger className='hover:bg-accent hover:text-accent-foreground w-auto rounded-full border-none bg-transparent p-1 shadow-none focus:ring-0 [&>svg]:hidden'>
        <SelectValue>
          <div className='flex items-center'>
            <SvgIcon name={'language'} />
            <span className='sr-only'>{languages[locale as keyof typeof languages]}</span>
          </div>
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        {locales.map(getCountry).map((item) => (
          <SelectItem key={`${item?.lang}-${item?.alpha2}`} value={`${item?.lang}-${item?.alpha2}`}>
            <div className='flex items-center gap-2'>
              <Icon icon={`flagpack:${item?.alpha2.toLowerCase()}`} className='!size-5' />
              {languages[`${item?.lang}-${item?.alpha2}` as keyof typeof languages]}
            </div>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>*/
  );
}
