import {
  IconButton,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@mui/material';
import { makeStyles } from '@mui/styles';
import React, { useContext } from 'react';
import AuthContext from '../context/AuthContext';
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
import ClearIcon from '@mui/icons-material/Clear';
import DeleteIcon from '@mui/icons-material/Delete';
import ItemDescription from './ItemDescription';
import { styled } from '@mui/system';

const CustomCell = styled(TableCell)(({ theme }) => ({
  fontFamily: 'Noto Sans KR',
  fontWeight: 'bold',
}));

const useStyles = makeStyles({
  root: { fontFamily: 'Noto Sans KR', borderTop: 'solid 1px #333' },
  table: {
    minWidth: 650,
  },
  col: {
    backgroundColor: '#f7f7f7',
  },
  image: { width: 50, marginRight: '10px' },
});

const cartMessage = (user) => {
  if (user) {
    return 'Please add items in the cart';
  }
  return 'Please log in to see your items in the cart';
};

const CartList = () => {
  const classes = useStyles();
  const { user, cartItems, addToCart, removeFromCart } =
    useContext(AuthContext);

  return (
    <div className={classes.root}>
      {cartItems.length < 1 ? (
        <div style={{ textAlign: 'center', margin: '2em 0' }}>
          {cartMessage(user)}
        </div>
      ) : (
        <Table className={classes.table}>
          <TableHead>
            <TableRow className={classes.col}>
              <CustomCell className={classes.font}>Product</CustomCell>
              <CustomCell className={classes.font} align="center">
                Qty
              </CustomCell>
              <CustomCell className={classes.font} align="right">
                Price
              </CustomCell>
              <CustomCell align="center">
                <DeleteIcon />
              </CustomCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {cartItems.map((row) => (
              <TableRow key={row.id}>
                <CustomCell className={classes.font} component="th" scope="row">
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                    }}
                  >
                    <img
                      src={row.image}
                      alt={row.name}
                      className={classes.image}
                    />
                    <div
                      style={{
                        display: 'flex',
                        flexDirection: 'column',
                      }}
                    >
                      <span>{row.name}</span>
                      {ItemDescription(row.color, row.season)}
                    </div>
                  </div>
                </CustomCell>
                <CustomCell className={classes.font} align="center">
                  <IconButton
                    id={row.id}
                    onClick={(e) => addToCart(e.currentTarget.id)}
                  >
                    <AddCircleOutlineIcon />
                  </IconButton>
                  {row.quantity}
                  <IconButton
                    id={row.id}
                    onClick={(e) => removeFromCart(e.currentTarget.id)}
                  >
                    <RemoveCircleOutlineIcon />
                  </IconButton>
                </CustomCell>
                <CustomCell className={classes.font} align="right">
                  $ {row.price * row.quantity}
                </CustomCell>
                <CustomCell align="center">
                  <IconButton
                    id={row.id}
                    onClick={(e) => removeFromCart(e.currentTarget.id)}
                  >
                    <ClearIcon />
                  </IconButton>
                </CustomCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </div>
  );
};

export default CartList;