import React, { Component, PropTypes } from 'react';
import update from 'react/lib/update';
import { DropTarget } from 'react-dnd';
import shouldPureComponentUpdate from './utils/shouldPureComponentUpdate';
import ItemTypes from './utils/ItemTypes';
import DraggableElement from './DraggableElement';
import NonDraggableElement from './NonDraggableElement';
import snapToGrid from './utils/snapToGrid';
import { connect } from 'react-redux';
import { setElementXY, deleteElement } from '../reducers/elements'

const styles = {
  width: '100%',
  height: 500,
  border: '1px solid black',
  position: 'relative',
};

const elementTarget = {
  drop(props, monitor, component) {
    const delta = monitor.getDifferenceFromInitialOffset()
    const item = monitor.getItem()

    let left = Math.round(item.left + delta.x)
    let top = Math.round(item.top + delta.y)
    if (props.snapToGrid) {
      [left, top] = snapToGrid(left, top)
    }

    component.moveElement(item.type, item.id, left, top)
  },
};


class Page extends Component {
  static propTypes = {
    connectDropTarget: PropTypes.func.isRequired,
    snapToGrid: PropTypes.bool.isRequired,
  }

  shouldComponentUpdate = shouldPureComponentUpdate;

  constructor(props) {
    super(props)
  }

  moveElement(type, id, left, top) {

    if(this.props.deleteMode) {
      let elementToDelete = {
        type: type,
        id: id,
      }

      this.props.deleteElement(elementToDelete)
    } else {

      let elementUpdate = {
        type: type,
        id: id,
        left: left,
        top: top,
      }

      this.props.setElementXY(elementUpdate)
    }
  }


  // render() {
  //   const { text, connectDragSource } = this.props;
  //   return connectDragSource(
  //     <div style={getStyles(this.props)}>
  //       {
  //         this.props.type === "photo" ?
  //           <PhotoElement id={this.props.id} source={this.props.source}/>
  //           : <Element text={text} id={this.props.id} type={this.props.type} />
  //       }
  //     </div>,
  //   );
  // }

  renderElement(item, key, type) {
    if (this.props.editable) return <DraggableElement key={key} id={key} type={type} {...item} />
    else return <NonDraggableElement key={key} id={key} type={type} {...item} />
  }

  render() {
    const { connectDropTarget } = this.props
    const { elements } = this.props


    return connectDropTarget(
      <div style={styles}>
        {Object
          .keys(elements)
          .map(type => {
            return Object.keys(elements[type])
            .map((elementId) => {
              var currentEl = elements[type][elementId];
              return this.renderElement(currentEl, elementId, type)
            })
          })
        }
      </div>,
    );
  }
}

const mapStateToProps = state => state

// wraps Page component with DropTarget capabilities from react-dnd,
// similar to the redux connect function
Page = DropTarget(ItemTypes.ELEMENT, elementTarget, connect => ({
  connectDropTarget: connect.dropTarget(),
}))(Page)

Page = connect(mapStateToProps, { setElementXY, deleteElement })(Page)

export default Page

@@ -1629,422 +1629,8 @@
  %7D%0A%0A
-%0A  // render() %7B%0A  //   const %7B text, connectDragSource %7D = this.props;%0A  //   return connectDragSource(%0A  //     %3Cdiv style=%7BgetStyles(this.props)%7D%3E%0A  //       %7B%0A  //         this.props.type === %22photo%22 ?%0A  //           %3CPhotoElement id=%7Bthis.props.id%7D source=%7Bthis.props.source%7D/%3E%0A  //           : %3CElement text=%7Btext%7D id=%7Bthis.props.id%7D type=%7Bthis.props.type%7D /%3E%0A  //       %7D%0A  //     %3C/div%3E,%0A  //   );%0A  // %7D%0A%0A
   re

Update Page.js