import React, {useState} from 'react'
import Link from 'next/link'
import useUser from 'lib/useUser'
import fetchJson from 'lib/fetchJson'
import {toggleMin} from 'helpers/windowActions'
import {useRouter} from 'next/router'

const Header = ({apps, setApps}) => {
  const [userMenu, setUserMenu] = useState(false);
  const {user, mutateUser} = useUser()
  const router = useRouter()

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

  return (
    <header>
      <nav>
        <ul className='header__apps'>
          {
            apps && apps.map(app => (
              <li
                key={app.name}
                style={app.min ? {fontWeight: 600} : {}}
                onClick={() => toggleMin(app.name, apps, setApps)}
              >
                {app.name}
              </li>
            ))
          }
        </ul>
        <ul>
          {!user?.isLoggedIn && (
            <li>
              <Link href="/register">
                <a>Register</a>
              </Link>
            </li>
          )}
          {!user?.isLoggedIn && (
            <li>
              <Link href="/login">
                <a>Login</a>
              </Link>
            </li>
          )}
          {user?.isLoggedIn && (
            <li>
              <p
                className='user-menu'
                onClick={() => setUserMenu(!userMenu)}
              >{user?.email}</p>
              {
                userMenu && (
                  <ul className='user-submenu'>
                    <li>
                      <a href="/api/logout" onClick={handleLogout}>
                        Logout
                      </a>
                    </li>
                  </ul>
                )
              }
            </li>
          )}
        </ul>
      </nav>
      <style jsx>{`
        header {
          height: 2em;
          padding: 0.5rem;
          background-color: rgba(255, 255, 255, 0.4);
          border-bottom: 1px solid rgba(255, 255, 255, 0.5)
        }

        nav {
          display: flex;
        }

        .header__apps {
          flex-grow: 1;
          overflow: auto;
        }

        li {
          margin-left: 1em;
          margin-right: 1em;
          display: inline-block;
          cursor: pointer;
        }

        .header__separator {
          margin-right: auto;
        }

        a {
          color: #333;
          font-weight: 600;
          text-decoration: none;
          align-items: center;
        }

        .user-menu {
          font-weight: 600;
          cursor: pointer;
          position: relative;
        }

        .user-submenu {
          position: absolute;
          right: 0;
          top: 2.1em;
          width: 10em;
          padding: .5em;
          background-color: rgba(255, 255, 255, .9);
          border: 1px solid rgba(255, 255, 255, .5)
        }
        .user-submenu a {
          text-align: right;
        }
      `}</style>
    </header>
  )
}

export default Header