"use strict";

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

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

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 _formatMessage = _interopRequireDefault(require("format-message"));

var _View = _interopRequireDefault(require("@instructure/ui-layout/lib/components/View"));

var _Tray = _interopRequireDefault(require("@instructure/ui-overlays/lib/components/Tray"));

var _CloseButton = _interopRequireDefault(require("@instructure/ui-buttons/lib/components/CloseButton"));

var _alertHelpers = require("../../../../common/util/alertHelpers");

var ModerateTray =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(ModerateTray, _Component);

  function ModerateTray() {
    var _getPrototypeOf2;

    var _this;

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

    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)(ModerateTray)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.onClose = function () {
      _this.props.onClose();

      _this.props.onTrayClosed();
    };

    _this.renderChildren = function () {
      return _react.default.Children.map(_this.props.children, function (child) {
        if (!child) return null;
        return _react.default.cloneElement(child, {
          trayResetFocus: function trayResetFocus() {
            return _this.closeRef.focus();
          }
        });
      });
    };

    _this.setCloseRef = function (el) {
      return _this.closeRef = el;
    };

    return _this;
  }

  (0, _createClass2.default)(ModerateTray, [{
    key: "labelText",
    value: function labelText() {
      if (this.props.participantName) {
        return this.props.participantName;
      }

      return "Modereren";
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement(_Tray.default, {
        label: this.labelText(),
        liveRegion: _alertHelpers.liveRegion,
        onClose: this.onClose,
        onDismiss: this.props.closeTray,
        open: this.props.isOpen,
        placement: "end",
        shouldCloseOnDocumentClick: true
      }, _react.default.createElement(_CloseButton.default, {
        placement: "start",
        offset: "x-small",
        variant: "icon",
        onClick: this.props.closeTray,
        buttonRef: this.setCloseRef
      }, "Sluiten"), _react.default.createElement(_View.default, {
        as: "div",
        padding: "medium"
      }, _react.default.createElement("h2", null, this.labelText()), this.renderChildren()));
    }
  }]);
  ModerateTray.displayName = "ModerateTray";
  return ModerateTray;
}(_react.Component);

exports.default = ModerateTray;
ModerateTray.propTypes = {
  children: _react.PropTypes.node.isRequired,
  closeTray: _react.PropTypes.func.isRequired,
  isOpen: _react.PropTypes.bool.isRequired,
  onTrayClosed: _react.PropTypes.func,
  onClose: _react.PropTypes.func,
  participantName: _react.PropTypes.string
};
ModerateTray.defaultProps = {
  onTrayClosed: function onTrayClosed() {},
  participantName: null
};