import Link from "next/link"
import PropTypes from "prop-types"
import React from "react"

import useUser from '../../hooks/useUser'
import useCart from '../../hooks/useCart'
import logo from './sos-logo.png'
import styles from './style.module.css'

import AdminNav from '~/components/adminNav'

const Header = () => {
  const user = useUser()
  const [cart] = useCart()
  const cartSize = (cart && cart.items.length) ? cart.items.map(item => item.count).reduce((sum, current) => (sum + current)) : 0

  return (
    <>
      <AdminNav/>
      <header className={styles.container}>
        <div className={styles.logo}>
          <img alt="" src={logo}/>
        </div>
        <h1 className={styles.title}>
          <Link href="/"><a>Society <span>of</span> Socks</a></Link>
        </h1>
        <ul className={styles.primaryNav}>
          <li><Link href="/store/categories"><a>Catalogue</a></Link></li>
          <li><Link href="/store/popular"><a>Popular</a></Link></li>
          <li><Link href="/store/new"><a>New</a></Link></li>
        </ul>
        <ul className={styles.accountNav}>
          <li><Link href="/store/cart"><a><span className="fa fa-shopping-cart"></span> Cart{cartSize > 0 ? ` (${cartSize})` : ''}</a></Link></li>
          {
            (!user)?(
              <li><Link href="/login"><a>Log in</a></Link></li>
            ):(
              <>
                <li><Link href="/account"><a>Account</a></Link></li>
                {user.is_admin && <li><Link href="/admin"><a>Admin</a></Link></li>}
                <li><Link href="/api/auth/logout"><a>Log out</a></Link></li>
              </>
            )
          }
        </ul>
      </header>
    </>
  )
}

Header.propTypes = {
  user: PropTypes.object,
}

Header.defaultProps = {
  user: null,
}

export default Header