import React, { useCallback, useMemo } from 'react'

import { GlobalOutlined } from '@ant-design/icons'
import { Dropdown, Menu, type DropDownProps, type MenuProps } from 'antd'
import { useTranslation } from 'react-i18next'

import { languages, languagesHashmap, type LanguageID } from '~/utils/i18n'

import { globalAddTranslations } from '../translations'

export interface LanguageDropdownProps {
  className?: string
  placement?: DropDownProps['placement']
  onClick?: (lang: string) => void
  children?: React.ReactNode
}

const translations = {
  en: {
    languageDropdown: {
      lang: 'English'
    }
  },
  zh: {
    languageDropdown: {
      lang: '简体中文'
    }
  }
}

globalAddTranslations(translations, 'component')

const LanguageDropdown: React.FC<LanguageDropdownProps> = ({
  children,
  className = '',
  placement = 'bottomRight',
  onClick
}) => {
  const { i18n, t } = useTranslation()
  // invariant
  const languageOptions = useMemo(
    () =>
      languages.map((key) => (
        <Menu.Item key={key}>
          {languagesHashmap[key as LanguageID].name}
        </Menu.Item>
      )),
    []
  )

  const onLangClick: Required<Pick<MenuProps, 'onClick'>>['onClick'] =
    useCallback(
      (e) => {
        i18n.changeLanguage(e.key)
        if (onClick) {
          onClick(e.key)
        }
      },
      [i18n, onClick]
    )

  const menu = useMemo(
    () => (
      <Menu onClick={onLangClick} selectedKeys={[i18n.language]}>
        {languageOptions}
      </Menu>
    ),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [i18n, i18n.language, languageOptions]
  )

  return (
    <Dropdown className={className} overlay={menu} placement={placement}>
      {children ?? (
        <span className='text-gray-300 cursor-pointer py-2'>
          <GlobalOutlined />{' '}
          {t('languageDropdown.lang', {
            ns: 'component'
          })}
        </span>
      )}
    </Dropdown>
  )
}

export default LanguageDropdown