import React from 'react'
import CartPreview from 'components/CartPreview'
import AccountMenu from 'components/AccountMenu'
import UniversalLink from 'components/UniversalLink'

const headerStyles = {
  backgroundColor: "#b2dfdb",
  borderColor: "#80cbc4"
}

export default (props) => {
  const { account, cart, dispatch } = props
  return (
    <header className="header-basic">
      <nav className="navbar navbar-default navbar-fixed-top" style={headerStyles}>
        <div className="navbar-header">
          <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
            <span className="sr-only">Toggle navigation</span>
            <span className="icon-bar" />
            <span className="icon-bar" />
            <span className="icon-bar" />
          </button>
        </div>
        <UniversalLink to="/" className="navbar-brand">
          <img src="https://s3-us-west-1.amazonaws.com/guan-shu/logo_no_text.png" />
        </UniversalLink>
        <div className="collapse navbar-collapse header-limiter" id="navbar-collapse-1" style={headerStyles}>
          <ul className="nav navbar-nav navbar-right">
            <li>
              <UniversalLink to={Routes.spree_products_path()}>
                {I18n.t('spree.products')}
              </UniversalLink>
            </li>
            <li>
              {!account.isFetching && <AccountMenu account={account} />}
            </li>
            <li> 
              {!account.email && <a href="/signup">Sign Up</a>}
            </li>
            <li>
              {!cart.isFetching && <CartPreview cart={cart} dispatch={dispatch}/>}
            </li>
          </ul>
        </div>
      </nav>
    </header>
  )
}
