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'

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 (
    <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