import React from 'react'
import PropTypes from 'prop-types'
import Product from './Product'
import Badge from 'material-ui/Badge';
import IconButton from 'material-ui/IconButton';
import FlatButton from 'material-ui/FlatButton';
import Add_shopping_cart from 'material-ui/svg-icons/action/add-shopping-cart';

const Cart  = ({ products, total, onCheckoutClicked, actions, handleOrderModal, closeModal, displayOrder, orderButtonStyle, removeButtonStyle, cartModalOpen}) => {
  const hasProducts = products.length > 0;
  const nodes = hasProducts ? (
    <Product
      products={products}
      cartModalOpen={cartModalOpen}
      actions={actions}
      handleOrderModal={handleOrderModal}
      closeModal={closeModal}
      displayOrder={displayOrder}
      removeButtonStyle={removeButtonStyle}
      orderButtonStyle={orderButtonStyle}
      total= {total}
    />
  ) : (
    <em>Please add some products to cart.</em>
  );
  return (
    <div className="cartContainer">
      <div className="menuHeader">
        <h1 className='addCart'><strong>Your Cart</strong></h1>
      </div>
      <div>{nodes}</div>
      <p className="card">Price: &#36;{total}</p>
    </div>
  );
};

Cart.propTypes = {
  products: PropTypes.array,
  total: PropTypes.string,
  onCheckoutClicked: PropTypes.func,
};

export default Cart;
