import { useState, useContext } from 'react'
import Link from 'next/link'
import LogoutButton from './LogoutButton'
import LoginForm from './LoginForm'
import { UserContext } from '../hooks'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons'

const UserNav = () => {
  const [menu, setMenu] = useState(false)
  const { user } = useContext(UserContext)

  return (
    <li>
      <a
        href=''
        onClick={ev => {
          ev.preventDefault()
          setMenu(!menu)
        }}
      >
        <FontAwesomeIcon icon={faUser} />
        {user?.data ? user.data.currentUser.name : 'Login'}
      </a>

      {menu ? (
        <section className='usermenu'>
          {user?.data ? (
            <>
              <h2>Welcome, {user.data.currentUser.name}</h2>
              <Link href={{ pathname: 'user' }}>
                <a>Edit user data</a>
              </Link>
              <LogoutButton />
            </>
          ) : (
            <LoginForm />
          )}
        </section>
      ) : null}
    </li>
  )
}

export default UserNav
