content: import React from 'react';
  import PropTypes from 'prop-types';
  import _ from 'lodash';
  import {DropTarget} from 'react-dnd';
  import classNames from 'classnames';
  import Card from '../components/Card';
  
  const pileTarget = {
      drop(props, monitor, component) {
          if (!monitor.isOver({shallow: true})) {
              return;
          }
          const {moveCard, pileId, cards} = props;
          const from = monitor.getItem();
          if (from.index === cards.length - 1) {
              return;
          }
  
          const to = {
              index: cards.length,
              pileId,
          };
          moveCard(from, to);
  
          // should not get in the habit of assigning directly to the monitor,
          // but this is gives us a performance boost and recommended by
          // react-dnd
          _.assign(monitor.getItem(), to);
      },
  };
  
  const collect = (connect, monitor) => {
      return {
          connectDropTarget: connect.dropTarget(),
          isOver: monitor.isOver(),
      };
  };
  
  class Pile extends React.Component {
      static propTypes = {
          sandboxId: PropTypes.number.isRequired,
          pileId: PropTypes.number.isRequired,
          moveCard: PropTypes.func.isRequired,
          connectDropTarget: PropTypes.func.isRequired,
          cards: PropTypes.array.isRequired,
          selectBox: PropTypes.any,
      };
  
      constructor(props) {
          super(props);
          this.state = {
              cards: _.clone(this.props.cards),
          };
      }
  
      renderCards = (cards) => {
          return cards.map((card, i) => {
              const {cardId, cardImg, ...cardData} = card;
              const {pileId, moveCard, selectBox, dragging} = this.props;
              const cardProps = {
                  cardId,
                  cardImg,
                  cardData,
                  pileId,
                  moveCard,
                  dragging,
                  index: i,
                  isLast: i === cards.length - 1,
                  selectBox,
              };
              return <Card key={cardId}
                           {...cardProps} />;
          });
      };
  
      componentWillReceiveProps(nextProps) {
          const {cards} = nextProps;
          this.setState({
              cards: _.clone(cards),
          });
      }
  
      shouldComponentUpdate(nextProps, nextState) {
          return false;
          //return !(_.isEqual(this.props, nextProps) &&
          //         _.isEqual(this.state, nextState));
      }
  
      render() {
          const {connectDropTarget, isOver} = this.props;
          const {cards} = this.state;
          const cardClasses = classNames('deck-pile', isOver ? 'isHovering' : '');
  
          return connectDropTarget(
              <div className={cardClasses}>
                  {this.renderCards(cards)}
              </div>
          );
      }
  }
  
  // eslint-disable-next-line babel/new-cap
  export default DropTarget(['Card'], pileTarget, collect)(Pile);
  