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} from 'helpers/windowActions'
import {open} from 'helpers/windowActions'
import appList from 'configs/appList'
import useSettings from 'hooks/useSettings'

const Header = ({apps, setApps}) => {
  const [userMenu, setUserMenu] = useState(false);
  const {user, mutateUser} = useUser()
  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>
        <ul>
          {
            apps && [...apps].sort((a,b) => a.name > b.name).map(app => (
              <li
                key={app.name}
                onClick={() => handleClick(app, setApps)}
              >
                <span
                  style={{
                    ...apps.findIndex(a => a.name === app.name) === apps.length - 1 ? {fontWeight: 600} : {},
                    ...app.min ? {color: '#888'} : {}
                  }}
                >
                  {t(app.name)}
                </span>
              </li>
            ))
          }
        </ul>
        <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>
                      <a href="/api/logout" onClick={handleLogout}>
                        {t('logout')}
                      </a>
                    </li>
                  </ul>
                </>
                )
              }
            </li>
          )}
        </ul>
      </nav>
    </header>
  )
}

export default Header