import { useState } from 'react'
import Link from 'next/link'

const UserNav = props => {
  const [menu, setMenu] = useState(false)

  return (
    <>
      <a
        href='' onClick={ev => {
          ev.preventDefault()
          setMenu(!menu)
        }}
      >sali
      </a>
      {menu ? (
        <UserNavMenu />
      ) : null}
    </>
  )
}

const myStyle = (
  <style jsx>
    {`
section.usermenu {
position: absolute;
background: rgba(127,0,0,0.5);
}
`}
  </style>
)

const UserNavMenu = props => {
  const logout = async (ev, logout) => {
    ev.preventDefault()
    try {
      const id = await logout()
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <>
      <section className='usermenu'>
        <h2>Welcome, {name}</h2>
        <Link href={{ pathname: 'user' }}><a>Edit user data</a></Link>
        <a
          href='' onClick={ev => {
            ev.preventDefault()
            this.logout(ev, logout)
          }}
        >Logout
        </a>
      </section>
    </>
  )
}

const User = props => <a />

export { UserNav }
export default User