'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 _reactSimpleDropdown = require('react-simple-dropdown');

var _reactSimpleDropdown2 = _interopRequireDefault(_reactSimpleDropdown);

var _execute = require('../../epics/execute');

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

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

class Toolbar extends _react2.default.Component {

  constructor(props) {
    super(props);
    this.shouldComponentUpdate = _reactAddonsPureRenderMixin2.default.shouldComponentUpdate.bind(this);
    this.removeCell = this.removeCell.bind(this);
    this.executeCell = this.executeCell.bind(this);
    this.clearCellOutput = this.clearCellOutput.bind(this);
    this.toggleStickyCell = this.toggleStickyCell.bind(this);
    this.changeInputVisibility = this.changeInputVisibility.bind(this);
    this.changeOutputVisibility = this.changeOutputVisibility.bind(this);
    this.changeCellType = this.changeCellType.bind(this);
  }

  shouldComponentUpdate() {
    return false;
  }

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

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

  executeCell() {
    this.context.store.dispatch((0, _execute.executeCell)(this.props.id, this.props.cell.get('source')));
  }

  clearCellOutput() {
    this.refs.dropdown.hide();
    this.context.store.dispatch((0, _actions.clearCellOutput)(this.props.id));
  }

  changeInputVisibility() {
    this.refs.dropdown.hide();
    this.context.store.dispatch((0, _actions.changeInputVisibility)(this.props.id));
  }

  changeOutputVisibility() {
    this.refs.dropdown.hide();
    this.context.store.dispatch((0, _actions.changeOutputVisibility)(this.props.id));
  }

  changeCellType() {
    this.refs.dropdown.hide();
    const to = this.props.type === 'markdown' ? 'code' : 'markdown';
    this.context.store.dispatch((0, _actions.changeCellType)(this.props.id, to));
  }

  render() {
    const showPlay = this.props.type !== 'markdown';
    return _react2.default.createElement(
      'div',
      { className: 'cell-toolbar-mask', ref: 'mask' },
      _react2.default.createElement(
        'div',
        { className: 'cell-toolbar' },
        showPlay && _react2.default.createElement(
          'span',
          null,
          _react2.default.createElement(
            'button',
            { onClick: this.executeCell, className: 'executeButton' },
            _react2.default.createElement('span', { className: 'octicon octicon-triangle-right' })
          )
        ),
        _react2.default.createElement(
          'button',
          { onClick: this.removeCell },
          _react2.default.createElement('span', { className: 'octicon octicon-trashcan' })
        ),
        _react2.default.createElement(
          'button',
          { onClick: this.toggleStickyCell },
          _react2.default.createElement('span', { className: 'octicon octicon-pin' })
        ),
        _react2.default.createElement(
          _reactSimpleDropdown2.default,
          { ref: 'dropdown' },
          _react2.default.createElement(
            _reactSimpleDropdown.DropdownTrigger,
            null,
            _react2.default.createElement(
              'button',
              null,
              _react2.default.createElement('span', { className: 'octicon octicon-chevron-down' })
            )
          ),
          _react2.default.createElement(
            _reactSimpleDropdown.DropdownContent,
            { ref: 'DropdownContent' },
            _react2.default.createElement(
              'ul',
              null,
              _react2.default.createElement(
                'li',
                { onClick: this.clearCellOutput },
                _react2.default.createElement(
                  'a',
                  null,
                  'Clear Cell Output'
                )
              ),
              _react2.default.createElement(
                'li',
                { onClick: this.changeInputVisibility },
                _react2.default.createElement(
                  'a',
                  null,
                  'Toggle Input Visibility'
                )
              ),
              _react2.default.createElement(
                'li',
                { onClick: this.changeOutputVisibility },
                _react2.default.createElement(
                  'a',
                  null,
                  'Toggle Output Visibility'
                )
              ),
              _react2.default.createElement(
                'li',
                { onClick: this.changeCellType },
                _react2.default.createElement(
                  'a',
                  null,
                  'Convert to ',
                  this.props.type === 'markdown' ? 'Code' : 'Markdown',
                  ' Cell'
                )
              )
            )
          )
        )
      )
    );
  }
}
exports.default = Toolbar; /* eslint class-methods-use-this: 0 */

Toolbar.propTypes = {
  cell: _react2.default.PropTypes.any,
  id: _react2.default.PropTypes.string,
  type: _react2.default.PropTypes.string
};
Toolbar.contextTypes = {
  store: _react2.default.PropTypes.object
};