import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import { removeFromCart } from "./../redux/actions";

import { withStyles } from "@material-ui/core/styles";
import IconButton from "@material-ui/core/IconButton";
import Badge from "@material-ui/core/Badge";
import AccountCircle from "@material-ui/icons/AccountCircle";
import Typography from "@material-ui/core/Typography";
import ShoppingCartIcon from "@material-ui/icons/ShoppingCart";
import Drawer from "@material-ui/core/Drawer";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import Divider from "@material-ui/core/Divider";

import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import DeleteIcon from "@material-ui/icons/Delete";

const styles = theme => ({
  badge: {
    top: "50%",
    right: -3
  },
  cart: {
    color: "#fff"
  },
  drawer: {
    width: 300,
    padding: "1rem"
  }
});

class NavBarRight extends Component {
  state = {
    right: false
  };

  handleDelete = id => {
    this.props.removeFromCart(id);
  };

  toggleDrawer = (side, open) => event => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }
    this.setState({
      [side]: open
    });
  };

  getProductList = () => {
    const { cart, products } = this.props;
    return cart.map(item => {
      return products.find(product => product.id === item);
    });
  };

  renderCartList = () => {
    return this.getProductList().map((data, index) => {
      return (
        <ListItem key={index}>
          <ListItemText primary={data.name} secondary={data.points} />
          <ListItemSecondaryAction>
            <IconButton
              aria-label="Delete"
              onClick={() => this.handleDelete(data.id)}
            >
              <DeleteIcon />
            </IconButton>
          </ListItemSecondaryAction>
        </ListItem>
      );
    });
  };

  render() {
    const { points, classes, cartItems } = this.props;
    return (
      <Fragment>
        <IconButton color="inherit">
          <AccountCircle />
        </IconButton>
        <Typography variant="overline" color="inherit">
          {points} Puntos
        </Typography>
        <IconButton
          className={classes.badge}
          onClick={this.toggleDrawer("right", true)}
        >
          <Badge badgeContent={cartItems} color="secondary">
            <ShoppingCartIcon className={classes.cart} />
          </Badge>
        </IconButton>

        <Drawer anchor="right" open={this.state.right}>
          <div tabIndex={0} role="button" className={classes.drawer}>
            <div className={classes.drawerHeader}>
              <IconButton onClick={this.toggleDrawer("right", false)}>
                <ChevronLeftIcon />
              </IconButton>
            </div>
            <Divider />
            <Typography variant="h5" component="h5">
              Rewards Cart
            </Typography>
            {console.log(this.getProductList())}
            <List dense>{this.renderCartList()}</List>
          </div>
        </Drawer>
      </Fragment>
    );
  }
}

const mapStateToProps = ({ points, products, cart }) => {
  return {
    points,
    products,
    cart
  };
};

const mapDispatchToProps = dispatch => {
  return {
    removeFromCart: product => dispatch(removeFromCart(product))
  };
};
const addStyles = withStyles(styles)(NavBarRight);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(addStyles);

export default (state = [], action) => {
  switch (action.type) {
    case "ADD_TO_CART":
      console.log("ADDED TO CART");
      return [...state, action.payload];

    case "REMOVE_FROM_CART":
      console.log("REMOVED FROM CART");
      return [...state, state.filter(item => action.payload !== item)];

    default:
      return state;
  }
};

import products from "./../../apis/products";

export const fetchProducts = () => async dispatch => {
  const response = await products.get("/products");

  dispatch({
    type: "FETCH_PRODUCTS",
    payload: response.data
  });
};

export const addToCart = payload => {
  return {
    type: "ADD_TO_CART",
    payload: payload
  };
};

export const removeFromCart = payload => {
  return {
    type: "REMOVE_FROM_CART",
    payload: payload
  };
};