"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

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

var _CustomPropTypes = _interopRequireDefault(require("../../../../../util/CustomPropTypes"));

var _ElementsForSelectors = _interopRequireDefault(require("../../../../../util/ElementsForSelectors"));

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

var _Button = _interopRequireDefault(require("../Button"));

var _Body = _interopRequireDefault(require("../Body"));

var _constants = require("@instructure/quiz-common/lib/constants");

var _theme = _interopRequireDefault(require("./theme"));

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'cNGRt',
  template: function template(theme) {
    return "\n\n.cNGRt_NbWo{height:1px;position:relative}\n\n.cNGRt_NbWo,.cNGRt_ljGg{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;width:100%}\n\n.cNGRt_bRWN{border-bottom:solid ".concat(theme.borderLineBorderWidth || 'inherit', " ").concat(theme.borderLineBorderColor || 'inherit', ";top:0;width:100%}");
  },
  'addContentContainer': 'cNGRt_NbWo',
  'attachQuestionContainer': 'cNGRt_ljGg',
  'borderLine': 'cNGRt_bRWN'
};
var AddContentPopover = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(AddContentPopover, _Component);

  function AddContentPopover() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(AddContentPopover)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.applicationElement = function () {
      return (0, _ElementsForSelectors.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 _react.default.createElement(_Popover.default, {
        on: "click",
        onToggle: _this.toggle,
        show: _this.props.isEditing,
        shouldCloseOnEscape: true,
        shouldContainFocus: true,
        applicationElement: _this.applicationElement
      }, _react.default.createElement(_Popover.PopoverTrigger, null, _react.default.createElement("div", null, _this.renderAddContentButton())), _react.default.createElement(_Popover.PopoverContent, null, _react.default.createElement(_Body.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
      });
    };

    return _this;
  }

  (0, _createClass2.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); // force after modal attempt to refocus delete button
      }
    }
  }, {
    key: "renderAddContentButton",
    value: function renderAddContentButton() {
      var onClick = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
      return _react.default.createElement(_Button.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 : _react.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 _react.default.createElement("div", {
        className: wrapperClass,
        "data-automation": "sdk-build-add-content"
      }, borderLine, button);
    }
  }]);
  AddContentPopover.displayName = "AddContentPopover";
  return AddContentPopover;
}(_react.Component), _class2.propTypes = {
  appContainer: _CustomPropTypes.default.selectors.isRequired,
  allowStimulusCreation: _propTypes.default.bool,
  clearUi: _propTypes.default.func.isRequired,
  isEditing: _propTypes.default.bool.isRequired,
  isMobile: _propTypes.default.bool,
  openAddContentModal: _propTypes.default.func.isRequired,
  parentEntryId: _propTypes.default.string,
  position: _propTypes.default.number.isRequired,
  quizId: _propTypes.default.string.isRequired,
  shouldFocus: _propTypes.default.bool.isRequired,
  stimulusId: _propTypes.default.string,
  switchOffEditing: _propTypes.default.func.isRequired,
  switchOnEditing: _propTypes.default.func.isRequired,
  useStimulusTrigger: _propTypes.default.bool
}, _class2.defaultProps = {
  allowStimulusCreation: true,
  isMobile: (0, _windowChecks.onPhone)() || (0, _windowChecks.onTablet)(),
  parentEntryId: null,
  stimulusId: null,
  useStimulusTrigger: false
}, _temp)) || _class);
exports.default = AddContentPopover;