'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactAddonsPureRenderMixin = require('react-addons-pure-render-mixin');

var _reactAddonsPureRenderMixin2 = _interopRequireDefault(_reactAddonsPureRenderMixin);

var _reactDnd = require('react-dnd');

var _reactDom = require('react-dom');

var _immutable = require('immutable');

var _immutable2 = _interopRequireDefault(_immutable);

var _cell = require('./cell');

var _cell2 = _interopRequireDefault(_cell);

var _actions = require('../../actions');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const cellSource = {
  beginDrag(props) {
    return {
      id: props.id
    };
  }
};

function isDragUpper(props, monitor, component) {
  const hoverBoundingRect = (0, _reactDom.findDOMNode)(component).getBoundingClientRect();
  const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

  const clientOffset = monitor.getClientOffset();
  const hoverClientY = clientOffset.y - hoverBoundingRect.top;

  return hoverClientY < hoverMiddleY;
}

const cellTarget = {
  drop(props, monitor, component) {
    const hoverUpperHalf = isDragUpper(props, monitor, component);
    props.moveCell(monitor.getItem().id, props.id, hoverUpperHalf);
  },

  hover(props, monitor, component) {
    component.setState({ hoverUpperHalf: isDragUpper(props, monitor, component) });
  }
};

function collectSource(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
    connectDragPreview: connect.dragPreview()
  };
}

function collectTarget(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  };
}

class DraggableCell extends _react2.default.Component {

  constructor() {
    super();
    this.state = {
      hoverUpperHalf: true
    };
    this.shouldComponentUpdate = _reactAddonsPureRenderMixin2.default.shouldComponentUpdate.bind(this);
    this.selectCell = this.selectCell.bind(this);
  }

  componentDidMount() {
    const connectDragPreview = this.props.connectDragPreview;
    const img = new window.Image();
    img.src = ['data:image/png;base64,', 'iVBORw0KGgoAAAANSUhEUgAAADsAAAAzCAYAAAApdnDeAAAAAXNSR0IArs4c6QAA', 'AwNJREFUaAXtmlFL3EAUhe9MZptuoha3rLWgYC0W+lj/T3+26INvXbrI2oBdE9km', 'O9Nzxu1S0LI70AQScyFmDDfkfvdMZpNwlCCccwq7f21MaVM4FPtkU0o59RdoJBMx', 'WZINBg+DQWGKCAk+2kIKFh9JlSzLYVmOilEpR1Kh/iUbQFiNQTSbzWJrbYJximOJ', 'cSaulpVRoqh4K8JhjprIVJWqFlCpQNG51roYj8cLjJcGf5RMZWC1TYw1o2LxcEmy', '0jeEo3ZFWVHIx0ji4eeKHFOx8l4sVVVZnBE6tWLHq7xO7FY86YpPeVjeo5y61tlR', 'JyhXEOQhF/lw6BGWixHvUWXVTpdgyUMu8q1h/ZJbqQhdiLsESx4FLvL9gcV6q3Cs', '0liq2IHuBHjItYIV3rMvJnrYrkrdK9sr24EO9NO4AyI+i/CilOXbTi1xeXXFTyAS', 'GSOfzs42XmM+v5fJ5JvP29/fl8PDw43nhCbUpuzFxYXs7OxKmqZb1WQGkc/P80K+', 'T6dbnROaVJuyfPY+Pj7aup7h66HP/1Uu5O7u59bnhSTWpmxIEU3l9rBNdbrp6/TK', 'Nt3xpq7XK9tUp5u+Tm2/s/jYJdfX12LwBHVycrKRK89zmeJhYnZ7K3Fcz3e/2mDP', 'z7/waZEf8zaC+gSkKa3l4OBA3uztbXdOYFZtsKcfToNKSZNUPp6GnRN0AST3C1Ro', 'x9qS3yvbFqVC6+yVDe1YW/J7ZduiVGidvbKhHWtLfq9sW5QKrdMri9cxB6OFhQmO', 'TrDuBHjIRT5CEZZj0i7xOkYnWGeCPOQiHqC8lc/R60cLnNPuvjOkns7dk4t8/Jfv', 's46mRlWqQiudxebVV3gAj7C9hXsmgZeztnfe/91YODEr3IoF/JY/sE2gbGaVLci3', 'hh0tRtWNvsm16JmNcOs6N9dW72LP7yOtWbEhjAUkZ+icoJ5HbE6+NSxMjKWe6cKb', 'GkUWgMwiFbXSlRpFkXelUlF4F70rVd7Bd4oZ/LL8xiDmtPV2Nwyf2zOlTfHERY7i', 'Haa1+w2+iFqx0aIgvgAAAABJRU5ErkJggg=='].join('');
    img.onload = function dragImageLoaded() {
      connectDragPreview(img);
    };
  }

  selectCell() {
    this.context.store.dispatch((0, _actions.focusCell)(this.props.id));
  }

  render() {
    return this.props.connectDropTarget(_react2.default.createElement(
      'div',
      {
        style: {
          opacity: this.props.isDragging ? 0.25 : 1,
          borderTop: this.props.isOver && this.state.hoverUpperHalf ? '3px lightgray solid' : '3px transparent solid',
          borderBottom: this.props.isOver && !this.state.hoverUpperHalf ? '3px lightgray solid' : '3px transparent solid'
        },
        className: 'draggable-cell'
      },
      this.props.connectDragSource(_react2.default.createElement('div', {
        className: 'cell-drag-handle',
        onClick: this.selectCell
      })),
      _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(_cell2.default, {
          cell: this.props.cell,
          displayOrder: this.props.displayOrder,
          id: this.props.id,
          focusedCell: this.props.focusedCell,
          language: this.props.language,
          running: this.props.running,
          theme: this.props.theme,
          pagers: this.props.pagers,
          transforms: this.props.transforms
        })
      )
    ));
  }
}

DraggableCell.propTypes = {
  cell: _react2.default.PropTypes.instanceOf(_immutable2.default.Map).isRequired,
  connectDragPreview: _react2.default.PropTypes.func.isRequired,
  connectDragSource: _react2.default.PropTypes.func.isRequired,
  connectDropTarget: _react2.default.PropTypes.func.isRequired,
  displayOrder: _react2.default.PropTypes.instanceOf(_immutable2.default.List).isRequired,
  id: _react2.default.PropTypes.string,
  isDragging: _react2.default.PropTypes.bool.isRequired,
  isOver: _react2.default.PropTypes.bool.isRequired,
  focusedCell: _react2.default.PropTypes.string,
  transforms: _react2.default.PropTypes.instanceOf(_immutable2.default.Map).isRequired,
  language: _react2.default.PropTypes.string,
  running: _react2.default.PropTypes.bool,
  theme: _react2.default.PropTypes.string,
  pagers: _react2.default.PropTypes.instanceOf(_immutable2.default.List)
};
DraggableCell.contextTypes = {
  store: _react2.default.PropTypes.object
};
const source = new _reactDnd.DragSource('CELL', cellSource, collectSource);
const target = new _reactDnd.DropTarget('CELL', cellTarget, collectTarget);
exports.default = source(target(DraggableCell));