import { useCallback } from 'react';

import type { FC } from 'react';
import type { PickerProps } from './Picker';

import { LANGUAGE_COOKIE_NAME } from '~/lib/constants';
import { setClientCookie } from '~/lib/utils/cookie';
import FadeOnMount from '~/src/components/FadeOnMount';
import { getEnabledLocales } from '~/src/lib/i18n';
import { useSelector } from '~/src/store/redux';
import { selectUserLanguage } from '~/src/store/session/selectors';
import Picker from './Picker';

const DISPLAY_NAMES = {
  ar: 'العربية (Arabic)',
  de: 'Deutsch',
  en: 'English',
  es: 'Español',
  fr: 'Français',
  id: 'Bahasa Indonesia',
  it: 'Italiano',
  ja: '日本語 (Japan)',
  ko: '한국어 (Korea)',
  ms: 'Bahasa Melayu',
  pl: 'Polski',
  pt: 'Português',
  th: 'ไทย (Thai)',
  tr: 'Türkçe',
  'zh-CN': '中文(简体) (China)',
  'zh-TW': '中文(台灣) (Taiwan)',
};

const selectItems = getEnabledLocales().map((locale) => ({
  id: locale,
  text: DISPLAY_NAMES[locale],
}));

export const LanguagePicker: FC<Pick<PickerProps, 'height' | 'margin'>> = (
  pickerProps
) => {
  const currentLanguage = useSelector(selectUserLanguage);
  const displayName = DISPLAY_NAMES[currentLanguage];

  const onChange = useCallback<PickerProps['onChange']>((value) => {
    setClientCookie(LANGUAGE_COOKIE_NAME, value);
    window.location.reload();
  }, []);

  return (
    <FadeOnMount>
      <Picker
        {...pickerProps}
        onChange={onChange}
        title="Change country"
        value={currentLanguage}
        items={selectItems}
        currentText={displayName}
        testId="languagePicker"
      />
    </FadeOnMount>
  );
};