import styles from 'styles/Main.module.scss'
import React, { useState } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import useUser from 'hooks/useUser'
import fetchJson from 'helpers/fetchJson'
import { focus, toggleMin, open, close } from 'helpers/windowActions'
import appList from 'configs/appList'
import useSettings from 'hooks/useSettings'
import useApps from 'hooks/useApps'
import { faTimes } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const Header = () => {
  const [userMenu, setUserMenu] = useState(false)
  const [showApps, setShowApps] = useState(false)
  const { user, mutateUser } = useUser()
  const { apps, setApps } = useApps()
  const { t } = useSettings()
  const router = useRouter()

  const handleLogout = async (e) => {
    e.preventDefault()
    mutateUser(
      await fetchJson('/api/logout', { method: 'POST' }),
      false
    )
    router.push('/login')
  }

  const handleClick = (app, setApps) => {
    if (app.min) {
      toggleMin(app.name, setApps)
    }
    focus(app.name, setApps)
  }

  return (
    <header className={styles.header}>
      <nav>
        <div>
          <span onClick={() => setShowApps(s => !s)} className='mobile-only'>
            {apps && apps.length > 0 && apps[apps.length - 1]?.name}
            {apps && apps.length > 1 ? (' (' + (apps.length) + ')') : ''}
          </span>
          <ul className={showApps ? styles.showMobileAppList : 'desktop-only'}>
            <li className='mobile-only'>{t('open_apps')}</li>
            {
              apps && [...apps].sort((a, b) => a.name > b.name ? 1 : -1).map(app => {
                if (!app) return null
                return (
                  <li
                    key={app.name}
                    onClick={() => handleClick(app, setApps)}
                  >
                    <span
                      style={{
                        ...apps.findIndex(a => a && a.name === app.name) === apps.length - 1 ? { fontWeight: 600 } : {},
                        ...app.min ? { color: '#888' } : {}
                      }}
                    >
                      {t(app.name)}
                      <span className='mobile-only' onClick={() => close(app.name, setApps)}>
                        <FontAwesomeIcon icon={faTimes} />
                      </span>
                    </span>
                  </li>
                )
              })
            }
            <li className='mobile-only'>
              <span onClick={() => setShowApps(false)} className='window__button'>{t('close')}</span>
            </li>
          </ul>
        </div>
        <ul>
          {!user?.isLoggedIn && (
            <li>
              <Link href='/register'>
                <a>{t('register')}</a>
              </Link>
            </li>
          )}
          {!user?.isLoggedIn && (
            <li>
              <Link href='/login'>
                <a>{t('login')}</a>
              </Link>
            </li>
          )}
          {user?.isLoggedIn && (
            <li>
              <p
                className={styles.user}
                onClick={() => setUserMenu(!userMenu)}
              >{user?.email}
              </p>
              {
                userMenu && (

                  <>
                    <div className={styles.headerOverlay} onClick={() => setUserMenu(false)} />
                    <ul className={styles.submenu}>
                      {user.isVerified && (
                        <li>
                          <span onClick={() => {
                            open({ appName: 'Settings', ...appList.Settings }, setApps)
                            setUserMenu()
                          }}
                          >
                            {t('Settings')}
                          </span>
                        </li>
                      )}
                      <li>
                        <span onClick={handleLogout}>
                          {t('logout')}
                        </span>
                      </li>
                    </ul>
                  </>
                )
              }
            </li>
          )}
        </ul>
      </nav>
    </header>
  )
}

export default Header