import { useState, useEffect } from 'react';
import { Dropdown } from 'antd';
import { useTranslation } from 'react-i18next';
import { appendRequestParams } from '@/utils/request';

const i18n_to_htcode = {
  'zh': 2,
  'en': 1,
};

export const useDefaultLgc = () => {
  const { i18n } = useTranslation();
  return { language: i18n_to_htcode[i18n.language], };
};
/**
 * 语言选择组件
 */
const Language = () => {
const { t, i18n } = useTranslation();
  const [selectedKeys, setSelectedKeys] = useState([i18n.language]);

  useEffect(() => {
    appendRequestParams('lgc', i18n_to_htcode[i18n.language]);

    return () => {};
  }, [i18n.language]);

  // 切换语言事件
  const handleChangeLanguage = ({ key }) => {
    setSelectedKeys([key]);
    i18n.changeLanguage(key);
  };

  const langSupports = ['en', 'zh'].map((lang) => ({ label: t(`lang.${lang}`), key: lang }));

  /* 🌏🌐 */
  return (
    <Dropdown menu={{ items: langSupports, onClick: handleChangeLanguage, style: { width: 100 }, selectedKeys: selectedKeys }}>
      <div className='icon text-primary'>🌐<span>{t(`lang.${i18n.language}`)}</span></div>
    </Dropdown>
  );
};

export default Language;