import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'

import './App.css'

import { Button } from 'components/button'
import Loading from 'components/loading'

import { appTimezone, appVersion, appTheme } from './appConfig'
import Link from './components/link'

const App = () => {
  const [apiHealth, setApiHealth] = useState('not yet')
  const [didContactApi, setDidContactApi] = useState(false)
  const { t, i18n } = useTranslation(['common', 'footer'])

  if (!didContactApi) {
    setDidContactApi(true)
    fetch('http://localhost:3000/api/health/')
      .then((res) => res.text())
      .then((result) => {
        if (result === 'OK') {
          setApiHealth('yes')
        } else {
          setApiHealth(result)
        }
      })
      .catch((error) => {
        setApiHealth('error')
        console.log(error)
      })
  }

  return (
    <div className="App">
      <header className="App-header">
        <Button href="https://example.com" target="_blank" rel="noopener">
          Knapp
        </Button>
        <Button href="https://example.com" target="_blank" rel="noopener">
          Rosa knapp
        </Button>

        <p>{t('common:test')}</p>
        <p>{t('common:nested.test')}</p>
        <p>{t('footer:footerInfo')}</p>

        <Button
          onClick={() =>
            i18n.language === 'en'
              ? i18n.changeLanguage('nb')
              : i18n.changeLanguage('en')
          }
        >
          {t('common:language.change', {
            lang: i18n.language === 'en' ? 'Norsk' : 'Engelsk',
          })}
        </Button>
        <Loading />
        <p>
          Version {appVersion}
          <br />
          Timezone {appTimezone}
          <br />
          Theme {appTheme}
          <br />
          API reachable? {apiHealth}
        </p>


          <Link to='test@example.org' mail={true}>Mail link</Link>
          <Link to='test4' external={false} underline={true} noExternalIcon={true}>Internal link</Link>
          <Link to='test6' external={true} underline={false} noUnderline={true}>External link</Link>
          <Link to='test5' external={false} noUnderline={true}>Another internal link</Link>
      </header>
    </div>
  )
}

export default App