'use strict';

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

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;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Popover = require('@instructure/ui-overlays/lib/components/Popover');

var _Popover2 = _interopRequireDefault(_Popover);

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

var _lib2 = _interopRequireDefault(_lib);

var _CustomPropTypes = require('../../../../../util/CustomPropTypes');

var _CustomPropTypes2 = _interopRequireDefault(_CustomPropTypes);

var _ElementsForSelectors = require('../../../../../util/ElementsForSelectors');

var _ElementsForSelectors2 = _interopRequireDefault(_ElementsForSelectors);

var _windowChecks = require('../../../../../util/windowChecks');

var _Button = require('../Button');

var _Button2 = _interopRequireDefault(_Button);

var _Body = require('../Body');

var _Body2 = _interopRequireDefault(_Body);

var _constants = require('../../../../../../constants');

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.q_s4FMm6spbVqolF8uwrY {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n  position: relative;\n  height: 1px;\n}\n\n._3fuR-IZDhXTYASrXw7NiCT {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n._27ktU4k9TwgrtQ12Nu-A6K {\n  top: 0;\n  width: 100%;\n  border-bottom: solid ' + theme.borderLineBorderWidth + ' ' + theme.borderLineBorderColor + ';\n}\n';
  },
  'addContentContainer': 'q_s4FMm6spbVqolF8uwrY',
  'attachQuestionContainer': '_3fuR-IZDhXTYASrXw7NiCT',
  'borderLine': '_27ktU4k9TwgrtQ12Nu-A6K'
};
var AddContentPopover = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(AddContentPopover, _Component);

  function AddContentPopover() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = AddContentPopover.__proto__ || Object.getPrototypeOf(AddContentPopover)).call.apply(_ref, [this].concat(args))), _this), _this.applicationElement = function () {
      return (0, _ElementsForSelectors2.default)(_this.props.appContainer);
    }, _this.toggle = function (shouldShow) {
      if (shouldShow) {
        _this.props.switchOnEditing();
      } else {
        _this.props.switchOffEditing();
      }
    }, _this.storePopoverTriggerRef = function (b) {
      _this.popoverTrigger = b;
    }, _this.renderPopoverButton = function () {
      return _react2.default.createElement(
        _Popover2.default,
        {
          on: 'click',
          onToggle: _this.toggle,
          show: _this.props.isEditing,
          shouldCloseOnEscape: true,
          shouldContainFocus: true,
          applicationElement: _this.applicationElement
        },
        _react2.default.createElement(
          _Popover.PopoverTrigger,
          null,
          _react2.default.createElement(
            'div',
            null,
            _this.renderAddContentButton()
          )
        ),
        _react2.default.createElement(
          _Popover.PopoverContent,
          null,
          _react2.default.createElement(_Body2.default, {
            allowStimulusCreation: _this.props.allowStimulusCreation,
            onOpenBankTray: _this.props.switchOffEditing,
            onAddItem: _this.props.switchOffEditing,
            parentEntryId: _this.props.parentEntryId,
            position: _this.props.position,
            quizId: _this.props.quizId,
            stimulusId: _this.props.stimulusId
          })
        )
      );
    }, _this.openAddContentModal = function () {
      _this.props.openAddContentModal({
        allowStimulusCreation: _this.props.allowStimulusCreation,
        parentEntryId: _this.props.parentEntryId,
        position: _this.props.position,
        quizId: _this.props.quizId,
        stimulusId: _this.props.stimulusId
      });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(AddContentPopover, [{
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      var _this2 = this;

      if (this.props.shouldFocus) {
        setTimeout(function () {
          _this2.popoverTrigger && _this2.popoverTrigger.focus();
          _this2.props.clearUi(_constants.DELETED_QUIZ_ENTRY);
        }, 100);
      }
    }
  }, {
    key: 'renderAddContentButton',
    value: function renderAddContentButton() {
      var onClick = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

      return _react2.default.createElement(_Button2.default, {
        ref: this.storePopoverTriggerRef,
        onClick: onClick,
        isEditing: this.props.isEditing,
        useStimulusTrigger: this.props.useStimulusTrigger
      });
    }
  }, {
    key: 'renderModalButton',
    value: function renderModalButton() {
      return this.renderAddContentButton(this.openAddContentModal);
    }
  }, {
    key: 'render',
    value: function render() {
      var borderLine = this.props.useStimulusTrigger ? null : _react2.default.createElement('div', { className: styles.borderLine });
      var wrapperClass = this.props.useStimulusTrigger ? styles.attachQuestionContainer : styles.addContentContainer;

      var button = this.props.isMobile ? this.renderModalButton() : this.renderPopoverButton();

      return _react2.default.createElement(
        'div',
        { className: wrapperClass },
        borderLine,
        button
      );
    }
  }]);
  AddContentPopover.displayName = 'AddContentPopover'
  ;
  return AddContentPopover;
}(_react.Component), _class2.propTypes = {
  appContainer: _CustomPropTypes2.default.selectors.isRequired,
  allowStimulusCreation: _propTypes2.default.bool,
  clearUi: _propTypes2.default.func.isRequired,
  isEditing: _propTypes2.default.bool.isRequired,
  isMobile: _propTypes2.default.bool,
  openAddContentModal: _propTypes2.default.func.isRequired,
  parentEntryId: _propTypes2.default.string,
  position: _propTypes2.default.number.isRequired,
  quizId: _propTypes2.default.string.isRequired,
  shouldFocus: _propTypes2.default.bool.isRequired,
  stimulusId: _propTypes2.default.string,
  switchOffEditing: _propTypes2.default.func.isRequired,
  switchOnEditing: _propTypes2.default.func.isRequired,
  useStimulusTrigger: _propTypes2.default.bool
}, _class2.defaultProps = {
  allowStimulusCreation: true,
  isMobile: (0, _windowChecks.onPhone)() || (0, _windowChecks.onTablet)(),
  parentEntryId: null,
  stimulusId: null,
  useStimulusTrigger: false
}, _temp2)) || _class);
exports.default = AddContentPopover;