import React, { Suspense } from 'react'

import { Button } from 'antd'
import { useTranslation } from 'react-i18next'
import { I18nextProvider } from 'react-i18next'

import globalTranslations, {
  globalI18n,
  globalAddTranslations
} from '../translations'

const localTranslations = {
  en: {
    component: {
      testi18n: {
        hello: 'Hello'
      }
    }
  },
  zh: {
    component: {
      testi18n: {
        hello: '你好'
      }
    }
  }
}

globalAddTranslations(localTranslations, 'local')
globalAddTranslations(globalTranslations, 'global')

const TestI18N: React.FC = () => {
  const { t, i18n } = useTranslation()

  function toggle() {
    if (i18n.language.startsWith('zh')) {
      i18n.changeLanguage('en')
    } else {
      i18n.changeLanguage('zh')
    }
  }

  return (
    <>
      <h1>
        {t('component.testi18n.hello', {
          ns: 'local'
        })}
      </h1>
      <h1>{t('global:test_i18n.title')}</h1>
      <Button onClick={toggle}>toggle lang</Button>
    </>
  )
}

export default function TestI18NWrapper() {
  return (
    <I18nextProvider i18n={globalI18n}>
      <Suspense fallback='loading'>
        <TestI18N />
      </Suspense>
    </I18nextProvider>
  )
}