import { Divider, Grid } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import CartList from '../components/CartList';
import AuthContext from '../context/AuthContext';

const useStyles = makeStyles({
  root: { margin: '3em 0', padding: '0 15%', fontFamily: 'Noto Sans KR' },
  title: {
    fontSize: '2em',
    fontWeight: 'bold',
  },
  divider: {
    marginBottom: '4em',
  },
  link: {
    color: 'black',
    fontSize: '13px',
  },
  summary: {
    padding: '2% 5%',
    margin: '30px 0 0 0',
    border: '2px solid #d6d6d6',
    textAlign: 'center',
  },
});

const Cart = () => {
  const classes = useStyles();
  const { cartItems } = useContext(AuthContext);
  const totalPrice = cartItems.reduce(
    (acc, val) => acc + val.price * val.quantity,
    0,
  );

  return (
    <div className={classes.root}>
      <h2 className={classes.title}>Shopping Cart</h2>
      <Divider light className={classes.divider} />
      <CartList />
      <Link to="/" className={classes.link}>
        {'< Continue shopping'}
      </Link>
      <div className={classes.summary}>
        <Grid container spacing={1}>
          <Grid item xs={3}>
            <b>Price</b>
          </Grid>
          <Grid item xs={1}>
            {' '}
          </Grid>
          <Grid item xs={3}>
            <b>Shipping Cost</b>
          </Grid>
          <Grid item xs={2}>
            {' '}
          </Grid>
          <Grid item xs={3}>
            <b>Total</b>
          </Grid>
          <Grid item xs={3}>
            $ {totalPrice}
          </Grid>
          <Grid item xs={1}>
            +
          </Grid>
          <Grid item xs={3}>
            {totalPrice >= 200 ? 'Free' : '$ 20'}
          </Grid>
          <Grid item xs={2}>
            =
          </Grid>
          <Grid item xs={3}>
            {totalPrice >= 200 ? '$ ' + totalPrice : '$ ' + (totalPrice + 20)}
          </Grid>
        </Grid>
      </div>
    </div>
  );
};

export default Cart;