import { Query, Mutation } from 'react-apollo'
import { adopt } from 'react-adopt'
import Link from 'next/link'

import { CURRENT_USER, USER_LOGOUT } from '../lib/graphql'
import LoginForm from './login'

const UserAdoption = adopt({
  user: ({ render }) => <Query query={CURRENT_USER}>{render}</Query>,
  logout: ({ render }) => <Mutation mutation={USER_LOGOUT} refetchQueries={[{ query: CURRENT_USER }]}>{render}</Mutation>
})

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

  return (
    <>
      <UserAdoption>{({ user, logout }) => {
        if (user.loading) {
          return (
            <p>Loading...</p>
          )
        }
        if (user.error) {
          return (
            <LoginForm />
          )
        }
        const { name, email, id } = user.data.me
        return (
          <>
            <a
              href='' onClick={ev => {
                ev.preventDefault()
                setMenu(!menu)
              }}
            >{name}
            </a>
            {menu ? (
              <UserNavMenu />
            ) : null}
          </>
        )
      }}
      </UserAdoption>
    </>
  )
}

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