import { ReactNode } from 'react'
import { Avatar, Button, Dropdown, Menu } from 'antd'
import { Header } from 'antd/lib/layout/layout'
import { Link, useHistory } from 'react-router-dom'
import { useUserContext } from '../../../contexts/UserContext'

import './style.scss'

type Props = {
  children: ReactNode
}

export const AppHeader = ({ children }: Props) => {
  const { user, handleLogout } = useUserContext()
  const history = useHistory()

  // Unauthed Header
  if (!user)
    return (
      <Header className="stax-header">
        <h3>CashStacks! 💵</h3>
      </Header>
    )

  // Authed Header
  return (
    <div className="stax-header">
      <div className="header-left">
        <Link to="/">
          <h3>MVP Django React! 🤠</h3>
        </Link>
        {children}
      </div>
      <div>
        {/* <Button onClick={() => history.push('/new/user')}>New User</Button> */}
      </div>
      <div className="header-right">
        <p>Welcome, {user.name}!!</p>
        <Dropdown
          overlay={
            <Menu style={{ display: 'flex', flexDirection: 'column' }}>
              <Button onClick={() => history.push('/login')}>Login</Button>
              <Button onClick={handleLogout}>Logout</Button>
              <Button onClick={() => history.push('/forgot-password')}>
                Forgot Password
              </Button>
              <Button onClick={() => history.push('/profile')}>Profile</Button>
            </Menu>
          }
        >
          <Avatar>{user.name[0]}</Avatar>
        </Dropdown>
      </div>
    </div>
  )
}