'use strict';

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

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _dec,
    _class,
    _class2,
    _temp2,
    _default_es_number = Intl.NumberFormat('es', { style: 'decimal' }).format; /* eslint "import/no-extraneous-dependencies": "warn" */
/* eslint "import/no-webpack-loader-syntax": "warn" */
/* eslint "import/no-unresolved": "warn" */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactImmutableProptypes = require('react-immutable-proptypes');

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _katex = require('katex');

var _katex2 = _interopRequireDefault(_katex);

var _autoRender = require('katex/dist/contrib/auto-render.min');

var _autoRender2 = _interopRequireDefault(_autoRender);

require('style-loader!css-loader!katex/dist/katex.css');

var _AccessibleContent = require('@instructure/ui-a11y/lib/components/AccessibleContent');

var _AccessibleContent2 = _interopRequireDefault(_AccessibleContent);

var _Button = require('@instructure/ui-buttons/lib/components/Button');

var _Button2 = _interopRequireDefault(_Button);

var _Flex = require('@instructure/ui-layout/lib/components/Flex');

var _Flex2 = _interopRequireDefault(_Flex);

var _lib = require('@instructure/ui-themeable/lib');

var _lib2 = _interopRequireDefault(_lib);

var _PositionSummary = require('../PositionSummary');

var _PositionSummary2 = _interopRequireDefault(_PositionSummary);

var _formatMessage = require('../../../../format-message');

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _theme = require('./theme');

var _theme2 = _interopRequireDefault(_theme);

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

var styles = {
  template: function template(theme) {
    return '/*  imported from styles.css  */\n\n.SidebarItem__styles__sidebarItem {\n  border-right: ' + theme.hoverBorderWidth + ' solid ' + theme.borderColor + ';\n  border-bottom: ' + theme.bottomBorderWidth + ' solid ' + theme.bottomBorderColor + ';\n}\n\n.SidebarItem__styles__sidebarItem:hover {\n  border-right: ' + theme.hoverBorderWidth + ' solid ' + theme.hoverBorderColor + ';\n}\n\n.SidebarItem__styles__infoHeader {\n  font-size: ' + theme.infoHeaderFontSize + ';\n  display: flex;\n  color: ' + theme.infoHeaderColor + ';\n}\n\n.SidebarItem__styles__interactionType {\n  width: 60%;\n}\n\n.SidebarItem__styles__pointsPossible {\n  width: 40%;\n}\n\n.SidebarItem__styles__displayNumber {\n  color: ' + theme.darkTextColor + ';\n  font-size: ' + theme.numberFontSize + ';\n  font-weight: ' + theme.numberFontWeight + ';\n}\n\n.SidebarItem__styles__itemBody {\n  font-size: ' + theme.itemBodyFontSize + ';\n  color: ' + theme.darkTextColor + ';\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  margin-top: ' + theme.itemBodyMarginTop + ';\n}\n\n.SidebarItem__styles__mainText {\n  position: relative;\n  cursor: pointer;\n}\n\n.SidebarItem__styles__sidebarClosed {\n  padding: ' + theme.sidebarClosedPadding + ' 0;\n  margin: 0 ' + theme.sidebarClosedMargin + ';\n  text-align: center;\n}\n\n[dir="ltr"] .SidebarItem__styles__sidebarClosed {\n  text-align: center;\n}\n\n[dir="rtl"] .SidebarItem__styles__sidebarClosed {\n  text-align: center;\n}\n\n.SidebarItem__styles__pinWrapper {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.SidebarItem__styles__inStimulus {\n  border-bottom: none;\n}\n\n/* ========================= */\n/* sidebar_is_open overrides */\n/* ========================= */\n\n.SidebarItem__styles__sidebarIsOpen {\n  padding: ' + theme.sidebarIsOpenPadding + ';\n}\n\n.SidebarItem__styles__sidebarIsOpen.SidebarItem__styles__inStimulus {\n    margin-left: 10%;\n  }\n\n.SidebarItem__styles__sidebarIsOpen .SidebarItem__styles__mainText {\n    font-size: ' + theme.sidebarIsOpenMainTextFontSize + ';\n    margin-top: ' + theme.mainTextPaddingTop + ';\n  }\n';
  },
  'sidebarItem': 'SidebarItem__styles__sidebarItem',
  'infoHeader': 'SidebarItem__styles__infoHeader',
  'interactionType': 'SidebarItem__styles__interactionType',
  'pointsPossible': 'SidebarItem__styles__pointsPossible',
  'displayNumber': 'SidebarItem__styles__displayNumber',
  'itemBody': 'SidebarItem__styles__itemBody',
  'mainText': 'SidebarItem__styles__mainText',
  'sidebarClosed': 'SidebarItem__styles__sidebarClosed',
  'pinWrapper': 'SidebarItem__styles__pinWrapper',
  'inStimulus': 'SidebarItem__styles__inStimulus',
  'sidebarIsOpen': 'SidebarItem__styles__sidebarIsOpen'
};


window.katex = _katex2.default;

var SidebarItem = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(SidebarItem, _Component);

  function SidebarItem() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, SidebarItem);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = SidebarItem.__proto__ || Object.getPrototypeOf(SidebarItem)).call.apply(_ref, [this].concat(args))), _this), _this.scrollToItem = function (e) {
      // this can be a real scroll or a oqaat change
      // depending on whether is is oqaat or not
      _this.props.scrollToItem(_this.props.itemId);
      e.stopPropagation();
    }, _this.renderKatex = function () {
      return (0, _autoRender2.default)(_reactDom2.default.findDOMNode(_this));
    }, _this.componentDidMount = _this.renderKatex, _this.componentDidUpdate = _this.renderKatex, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  // ============
  //   ACTIONS
  // ============

  (0, _createClass3.default)(SidebarItem, [{
    key: 'getPointsText',


    // ============
    //   HELPERS
    // ============

    value: function getPointsText(points) {
      var _s, _n;

      return _s = points, _n = +_s, (_n === 1 ? _default_es_number(points) + ' punto' : _default_es_number(points) + ' puntos');
    }

    // =============
    //   RENDERING
    // =============

  }, {
    key: 'renderPosition',
    value: function renderPosition() {
      var _props = this.props,
          displayPosition = _props.displayPosition,
          position = _props.position,
          quizEntry = _props.quizEntry,
          sidebarOpen = _props.sidebarOpen;

      if (!sidebarOpen && quizEntry && quizEntry.sizeOfBank > 1) {
        return _react2.default.createElement(_PositionSummary2.default, {
          firstPosition: position,
          lastPosition: position + quizEntry.sizeOfBank - 1
        });
      }
      return _react2.default.createElement(
        'span',
        { className: styles.displayNumber },
        displayPosition
      );
    }
  }, {
    key: 'renderButton',
    value: function renderButton() {
      var _props2 = this.props,
          displayPosition = _props2.displayPosition,
          itemId = _props2.itemId;

      return _react2.default.createElement(
        _Button2.default,
        {
          onClick: this.scrollToItem,
          'data-automation-item-id': itemId,
          variant: 'link',
          size: 'small',
          margin: 'xxx-small',
          'data-automation': 'sdk-sidebar-item-button'
        },
        _react2.default.createElement(
          _AccessibleContent2.default,
          {
            alt: 'Deslizar hasta el elemento en la posici\xF3n ' + displayPosition
          },
          this.renderPosition()
        )
      );
    }
  }, {
    key: 'renderClosed',
    value: function renderClosed() {
      var contentWrapperClasses = (0, _classnames2.default)(styles.sidebarItem, styles.sidebarClosed, (0, _defineProperty3.default)({}, styles.inStimulus, this.props.inStimulus));

      return _react2.default.createElement(
        'div',
        { className: contentWrapperClasses },
        this.renderButton()
      );
    }
  }, {
    key: 'renderOpen',
    value: function renderOpen() {
      var _props3 = this.props,
          children = _props3.children,
          itemName = _props3.itemName,
          inStimulus = _props3.inStimulus,
          pointsPossible = _props3.pointsPossible;


      var contentWrapperClasses = (0, _classnames2.default)(styles.sidebarItem, styles.sidebarIsOpen, (0, _defineProperty3.default)({}, styles.inStimulus, inStimulus));

      return _react2.default.createElement(
        'div',
        { className: contentWrapperClasses },
        _react2.default.createElement(
          _Flex2.default,
          { justifyItems: 'space-between' },
          _react2.default.createElement(
            _Flex.FlexItem,
            null,
            this.renderButton()
          ),
          _react2.default.createElement(
            _Flex.FlexItem,
            {
              grow: true, shrink: true,
              onClick: this.scrollToItem,
              tabIndex: '-1'
            },
            _react2.default.createElement(
              'div',
              { className: styles.mainText },
              _react2.default.createElement(
                'div',
                { className: styles.infoHeader },
                _react2.default.createElement(
                  'div',
                  { className: styles.interactionType },
                  itemName
                ),
                _react2.default.createElement(
                  'div',
                  { className: styles.pointsPossible },
                  this.getPointsText(pointsPossible || 0)
                )
              ),
              _react2.default.createElement(
                'div',
                { className: styles.itemBody },
                this.props.itemBody
              )
            )
          ),
          _react2.default.createElement(
            _Flex.FlexItem,
            null,
            _react2.default.createElement(
              'div',
              { className: styles.pinWrapper },
              children
            )
          )
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      return this.props.sidebarOpen ? this.renderOpen() : this.renderClosed();
    }
  }]);
  SidebarItem.displayName = 'SidebarItem'
  ;
  return SidebarItem;
}(_react.Component), _class2.propTypes = {
  // Passed in by Sidebar
  children: _propTypes2.default.element,
  displayPosition: _propTypes2.default.string.isRequired,
  itemId: _propTypes2.default.string.isRequired,
  itemBody: _propTypes2.default.string,
  itemName: _propTypes2.default.string.isRequired,
  inStimulus: _propTypes2.default.bool,
  position: _propTypes2.default.number.isRequired,
  pointsPossible: _propTypes2.default.number.isRequired,
  quizEntry: _reactImmutableProptypes2.default.record, // not used on Take
  sidebarOpen: _propTypes2.default.bool.isRequired,
  // from connect
  scrollToItem: _propTypes2.default.func.isRequired
}, _class2.defaultProps = {
  children: null,
  inStimulus: false,
  itemBody: '',
  quizEntry: null }, _temp2)) || _class);
exports.default = SidebarItem;