'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 _editor = require('./editor');

var _editor2 = _interopRequireDefault(_editor);

var _latex = require('../latex');

var _latex2 = _interopRequireDefault(_latex);

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

const CommonMark = require('commonmark');
const MarkdownRenderer = require('commonmark-react-renderer');

const parser = new CommonMark.Parser();
const renderer = new MarkdownRenderer();

const mdRender = input => renderer.render(parser.parse(input));

class MarkdownCell extends _react2.default.Component {

  constructor(props) {
    super(props);
    this.shouldComponentUpdate = _reactAddonsPureRenderMixin2.default.shouldComponentUpdate.bind(this);
    this.state = {
      view: true,
      // HACK: We'll need to handle props and state change better here
      source: this.props.cell.get('source')
    };
    this.openEditor = this.openEditor.bind(this);
    this.editorKeyDown = this.editorKeyDown.bind(this);
    this.renderedKeyDown = this.renderedKeyDown.bind(this);
  }

  componentDidMount() {
    this.updateRenderedElement();
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      source: nextProps.cell.get('source')
    });
  }

  componentDidUpdate() {
    this.updateRenderedElement();
  }

  updateRenderedElement() {
    // On first load, if focused, focus rendered view
    if (this.state && this.state.view && this.props.focused) {
      this.refs.rendered.focus();
    }
  }

  /**
   * Handles when a keydown event occurs on the unrendered MD cell
   */
  editorKeyDown(e) {
    const shift = e.shiftKey;
    const ctrl = e.ctrlKey;
    if ((shift || ctrl) && e.key === 'Enter') {
      this.setState({ view: true });
    }
  }

  openEditor() {
    this.setState({ view: false });
  }

  /**
   * Handles when a keydown event occurs on the rendered MD cell
   */
  renderedKeyDown(e) {
    const shift = e.shiftKey;
    const ctrl = e.ctrlKey;
    if ((shift || ctrl) && e.key === 'Enter') {
      this.setState({ view: true });
      return false;
    }

    switch (e.key) {
      case 'ArrowUp':
        this.props.focusAbove();
        break;
      case 'ArrowDown':
        this.props.focusBelow();
        break;
      case 'Enter':
        this.openEditor();
        e.preventDefault();
        return false;
      default:
    }
    return true;
  }

  render() {
    return this.state && this.state.view ? _react2.default.createElement(
      'div',
      {
        className: 'rendered',
        onDoubleClick: this.openEditor,
        onKeyDown: this.renderedKeyDown,
        ref: 'rendered',
        tabIndex: '0'
      },
      _react2.default.createElement(
        _latex2.default,
        null,
        mdRender(this.state.source ? this.state.source : '*Empty markdown cell, double click me to add content.*')
      )
    ) : _react2.default.createElement(
      'div',
      { onKeyDown: this.editorKeyDown },
      _react2.default.createElement(
        'div',
        { className: 'input-container' },
        _react2.default.createElement('div', { className: 'prompt' }),
        _react2.default.createElement(_editor2.default, {
          language: 'markdown',
          id: this.props.id,
          lineWrapping: true,
          input: this.state.source,
          theme: this.props.theme,
          focusAbove: this.props.focusAbove,
          focusBelow: this.props.focusBelow,
          focused: this.props.focused
        })
      )
    );
  }
}
exports.default = MarkdownCell;
MarkdownCell.propTypes = {
  cell: _react2.default.PropTypes.any,
  id: _react2.default.PropTypes.string,
  theme: _react2.default.PropTypes.string,
  focusAbove: _react2.default.PropTypes.func,
  focusBelow: _react2.default.PropTypes.func,
  focused: _react2.default.PropTypes.bool
};
MarkdownCell.contextTypes = {
  store: _react2.default.PropTypes.object
};
MarkdownCell.defaultProps = {
  focused: false
};