import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { isWidthUp } from '@material-ui/core/withWidth';
import classNames from 'classnames';
import AddShoppingCart from '@material-ui/icons/AddShoppingCart';
import Type from 'ba-styles/Typography.scss';
import {
  Typography,
  withWidth,
  Card,
  IconButton,
  Tooltip,
  CardMedia,
  CardActions,
  CardContent,
  Chip,
  Fab,
  Button,
} from '@material-ui/core';
import Rating from '../Rating/Rating';
import styles from './cardStyle-jss';


class ProductCard extends React.Component {
  render() {
    const {
      classes,
      discount,
      soldout,
      thumbnail,
      name,
      desc,
      ratting,
      price,
      prevPrice,
      list,
      detailOpen,
      addToCart,
      width,
    } = this.props;
    return (
      <Card className={classNames(classes.cardProduct, isWidthUp('sm', width) && list ? classes.cardList : '')}>
        <div className={classes.status}>
          {discount !== '' && (
            <Chip label={'Discount ' + discount} className={classes.chipDiscount} />
          )}
          {soldout && (
            <Chip label="Sold Out" className={classes.chipSold} />
          )}
        </div>
        <CardMedia
          className={classes.mediaProduct}
          image={thumbnail}
          title={name}
        />
        <CardContent className={classes.floatingButtonWrap}>
          {!soldout && (
            <Tooltip title="Add to cart" placement="top">
              <Fab onClick={addToCart} size="small" color="secondary" aria-label="add" className={classes.buttonAdd}>
                <AddShoppingCart />
              </Fab>
            </Tooltip>
          )}
          <Typography noWrap gutterBottom variant="h5" className={classes.title} component="h2">
            {name}
          </Typography>
          <Typography component="p" className={classes.desc}>
            {desc}
          </Typography>
          <div className={classes.ratting}>
            <Rating value={ratting} max={5} readOnly />
          </div>
        </CardContent>
        <CardActions className={classes.price}>
          <Typography variant="h5">
            <span>
$
              {price}
            </span>
          </Typography>
          {prevPrice > 0 && (
            <Typography variant="caption" component="h5">
              <span className={Type.lineThrought}>
$
                {prevPrice}
              </span>
            </Typography>
          )}
          <div className={classes.rightAction}>
            <Button size="small" variant="outlined" color="secondary" onClick={detailOpen}>
              See Detail
            </Button>
            {!soldout && (
              <Tooltip title="Add to cart" placement="top">
                <IconButton color="secondary" onClick={addToCart} className={classes.buttonAddList}>
                  <AddShoppingCart />
                </IconButton>
              </Tooltip>
            )}
          </div>
        </CardActions>
      </Card>
    );
  }
}

ProductCard.propTypes = {
  classes: PropTypes.object.isRequired,
  discount: PropTypes.string,
  width: PropTypes.string.isRequired,
  soldout: PropTypes.bool,
  thumbnail: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  desc: PropTypes.string.isRequired,
  ratting: PropTypes.number.isRequired,
  price: PropTypes.number.isRequired,
  prevPrice: PropTypes.number,
  list: PropTypes.bool,
  detailOpen: PropTypes.func,
  addToCart: PropTypes.func,
};

ProductCard.defaultProps = {
  discount: '',
  soldout: false,
  prevPrice: 0,
  list: false,
  detailOpen: () => (false),
  addToCart: () => (false),
};

const ProductCardResponsive = withWidth()(ProductCard);
export default withStyles(styles)(ProductCardResponsive);