import Icon from '@ant-design/icons';
import { ReactComponent as LanguageUS } from 'assets/images/Svg/languageUS.svg';
import { ReactComponent as LanguageRU } from 'assets/images/Svg/languageRU.svg';
import { MenuProps } from 'antd/es/menu';
import { Menu } from 'antd';
import { getItem } from '../MainMenu/helpers';
import { FONT_SIZE_LARGE_ICON } from 'components/constants';
import * as React from 'react';
import { i18n as i18next } from 'i18next';
import { Locale } from 'core/i18n';

type MenuItem = Required<MenuProps>['items'][number];

const LanguageMenu = ({ i18n }: { i18n: i18next }): JSX.Element => {
  const changeLanguage = async (language: Locale): Promise<void> => {
    await i18n.changeLanguage(language);
  };

  const languageItemConfig: {
    language: Locale;
    icon: React.FC<React.SVGProps<SVGSVGElement>>;
  }[] = [
    { language: Locale.EN, icon: LanguageUS },
    { language: Locale.RU, icon: LanguageRU },
  ];

  const languageItems: MenuItem[] = languageItemConfig.map(
    ({ language, icon }) =>
      getItem(
        <Icon
          onClick={async () => {
            await changeLanguage(language);
          }}
          style={{ fontSize: FONT_SIZE_LARGE_ICON }}
          component={icon}
        />,
        language,
        false,
      ),
  );

  return <Menu defaultSelectedKeys={[i18n.language]} items={languageItems} />;
};

export default LanguageMenu;
