'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 _cellCreatorButtons = require('./cell-creator-buttons');

var _cellCreatorButtons2 = _interopRequireDefault(_cellCreatorButtons);

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

class CellCreator extends _react2.default.Component {

  constructor() {
    super();
    this.state = {
      show: false
    };
    this.shouldComponentUpdate = _reactAddonsPureRenderMixin2.default.shouldComponentUpdate.bind(this);
    this.setHoverElement = this.setHoverElement.bind(this);
    this.updateVisibility = this.updateVisibility.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.updateVisibility, false);
  }

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

  setHoverElement(el) {
    this.hoverElement = el;
  }

  updateVisibility(mouseEvent) {
    if (this.hoverElement) {
      const x = mouseEvent.clientX;
      const y = mouseEvent.clientY;
      const regionRect = this.hoverElement.getBoundingClientRect();
      const show = regionRect.left < x && x < regionRect.right && regionRect.top < y && y < regionRect.bottom;
      this.setState({ show });
    }
  }

  render() {
    return _react2.default.createElement(
      'div',
      { className: 'creator-hover-mask' },
      _react2.default.createElement(
        'div',
        { className: 'creator-hover-region', ref: this.setHoverElement },
        this.state.show || this.props.id === null ? _react2.default.createElement(_cellCreatorButtons2.default, { above: this.props.above, id: this.props.id }) : ''
      )
    );
  }

}
exports.default = CellCreator;
CellCreator.propTypes = {
  above: _react2.default.PropTypes.bool,
  id: _react2.default.PropTypes.string
};