'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

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

var _reactAddonsPureRenderMixin2 = _interopRequireDefault(_reactAddonsPureRenderMixin);

var _immutable = require('immutable');

var _immutable2 = _interopRequireDefault(_immutable);

var _codeCell = require('./code-cell');

var _codeCell2 = _interopRequireDefault(_codeCell);

var _markdownCell = require('./markdown-cell');

var _markdownCell2 = _interopRequireDefault(_markdownCell);

var _toolbar = require('./toolbar');

var _toolbar2 = _interopRequireDefault(_toolbar);

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

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

class Cell extends _react2.default.Component {

  constructor() {
    super();
    this.state = {
      hoverCell: false
    };
    this.shouldComponentUpdate = _reactAddonsPureRenderMixin2.default.shouldComponentUpdate.bind(this);
    this.selectCell = this.selectCell.bind(this);
    this.focusAboveCell = this.focusAboveCell.bind(this);
    this.focusBelowCell = this.focusBelowCell.bind(this);
    this.setCellHoverState = this.setCellHoverState.bind(this);
  }

  componentDidMount() {
    // Listen to the page level mouse move event and manually check for
    // intersection because we don't want the hover region to actually capture
    // any mouse events.  The hover region is an invisible element that
    // describes the "hot region" that toggles the creator buttons.
    document.addEventListener('mousemove', this.setCellHoverState, false);
  }

  componentWillUnmount() {
    document.removeEventListener('mousemove', this.setCellHoverState);
  }

  setCellHoverState(mouseEvent) {
    if (this.refs.cell) {
      const cell = _reactDom2.default.findDOMNode(this.refs.cell);
      if (cell) {
        const x = mouseEvent.clientX;
        const y = mouseEvent.clientY;
        const regionRect = cell.getBoundingClientRect();
        const hoverCell = regionRect.left < x && x < regionRect.right && regionRect.top < y && y < regionRect.bottom;
        this.setState({ hoverCell });
      }
    }
  }

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

  focusAboveCell() {
    this.context.store.dispatch((0, _actions.focusPreviousCell)(this.props.id));
  }

  focusBelowCell() {
    this.context.store.dispatch((0, _actions.focusNextCell)(this.props.id, true));
  }

  render() {
    const cell = this.props.cell;
    const type = cell.get('cell_type');
    const focused = this.props.focusedCell === this.props.id;
    return _react2.default.createElement(
      'div',
      {
        className: `cell ${ type === 'markdown' ? 'text' : 'code' } ${ focused ? 'focused' : '' }`,
        onClick: this.selectCell,
        ref: 'cell'
      },
      focused ? _react2.default.createElement(_toolbar2.default, {
        type: type,
        cell: cell,
        id: this.props.id
      }) : null,
      type === 'markdown' ? _react2.default.createElement(_markdownCell2.default, {
        focusAbove: this.focusAboveCell,
        focusBelow: this.focusBelowCell,
        focused: focused,
        cell: cell,
        id: this.props.id,
        theme: this.props.theme
      }) : _react2.default.createElement(_codeCell2.default, {
        focusAbove: this.focusAboveCell,
        focusBelow: this.focusBelowCell,
        focused: focused,
        cell: cell,
        id: this.props.id,
        theme: this.props.theme,
        language: this.props.language,
        displayOrder: this.props.displayOrder,
        cellStatus: this.props.cellStatus,
        transforms: this.props.transforms,
        pagers: this.props.pagers,
        running: this.props.running,
        getCompletions: this.props.getCompletions
      })
    );
  }
}

exports.Cell = Cell;
Cell.propTypes = {
  cell: _react2.default.PropTypes.any,
  displayOrder: _react2.default.PropTypes.instanceOf(_immutable2.default.List),
  cellStatus: _react2.default.PropTypes.instanceOf(_immutable2.default.Map),
  id: _react2.default.PropTypes.string,
  getCompletions: _react2.default.PropTypes.func,
  focusedCell: _react2.default.PropTypes.string,
  language: _react2.default.PropTypes.string,
  running: _react2.default.PropTypes.bool,
  theme: _react2.default.PropTypes.string,
  pagers: _react2.default.PropTypes.instanceOf(_immutable2.default.List),
  transforms: _react2.default.PropTypes.instanceOf(_immutable2.default.Map)
};
Cell.contextTypes = {
  store: _react2.default.PropTypes.object
};
exports.default = Cell;