import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined";

import './index.scss';
const useStyles = makeStyles({
  table: {
  },
});

const maxMobileSize = 550;

const fontSize = {
  mobile: {
    info: {
      strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28,
      p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36,
      span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36,
    },
    price: {
      strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22,
      span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40,
    },
    counter: {
      button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25,
      span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25,
    },
    delete: {
      span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28,
    },
  },
};



export default function BasicTable(props) {
  const classes = useStyles();
  const {list, handleCounter, handleDelete} = props;

  return (
    <>
      {
        window.innerWidth < 1000 ?
        <TableContainer component={Paper}>
          <Table className={classes.table} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell align="right">محصولات</TableCell>
                <TableCell align="center">قیمت</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              { list.map((row,i) => (
                <Item data={row} key={i} handleCounter={handleCounter} handleDelete={handleDelete} />
              ))}
            </TableBody>
          </Table>
        </TableContainer> : null 
      }
    </>
    
  );
}

// id: 1,
// title: "ریاضیات گسسته خیلی پیشرفته",
// subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد",
// options: "بسته‌های الحاقی: کیف، کفش و کوله پشتی",
// image: book1,
// slicePrice: 300000,
// number: 1,
// price: 2500000,

const Item = (props) => {
  const {data, handleCounter, handleDelete} = props;
  return(
    <TableRow key={data.name}>
      <TableCell align="right" component="th" scope="row">
        <div className="mobile-cart-table-product d-flex align-items-center">
          
          <img src={data.image} alt={data.title} />
          <div className="mobile-cart-table-product__info d-flex flex-column p-1">
            <strong style={{ fontSize: fontSize.mobile.info.strong }}>
              {data.title}
            </strong>
            <p style={{ fontSize: fontSize.mobile.info.p }}>{data.subTitle}</p>
            <span style={{ fontSize: fontSize.mobile.info.span }}>
              {data.options}
            </span>
            <div className="cart-item__delete d-flex align-items-center justify-content-center">
              <DeleteOutlineOutlinedIcon
                style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }}
                onClick={() => handleDelete(data.id)}
              />
              <span
                onClick={() => handleDelete(data.id)}
                style={{ fontSize: fontSize.mobile.delete.span, color: "#FC120A"}}
              >
                حذف
            </span>
          </div>
          </div>
        </div>
      </TableCell>
      <TableCell>
        <div className="mobile-cart-table-price d-flex flex-column align-items-center">
          <div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center">
              <strong style={{ fontSize: fontSize.mobile.price.strong }}>
                {data.price}
              </strong>
              <span style={{ fontSize: fontSize.mobile.price.span }}>
                {data.slicePrice} قیمت هر واحد
              </span>
          </div>
          <div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center">
            <button
              onClick={() => handleCounter("increase", data.id)}
              style={{ fontSize: fontSize.mobile.counter.button }}
            >
              +
            </button>
            <span style={{ fontSize: fontSize.mobile.counter.span }}>
              {data.number}
            </span>
            <button
              onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)}
              style={{ fontSize: fontSize.mobile.counter.button }}
            >
              -
            </button>
          </div>
        </div>
            
      </TableCell>
    </TableRow>
  );
}