"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 _propTypes = _interopRequireDefault(require("prop-types"));

var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));

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

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

var _Heading = _interopRequireDefault(require("@instructure/ui-elements/lib/components/Heading"));

var _RadioInputGroup = _interopRequireDefault(require("@instructure/ui-forms/lib/components/RadioInputGroup"));

var _RadioInput = _interopRequireDefault(require("@instructure/ui-forms/lib/components/RadioInput"));

var _ScreenReaderContent = _interopRequireDefault(require("@instructure/ui-a11y/lib/components/ScreenReaderContent"));

var _TextInput = _interopRequireDefault(require("@instructure/ui-forms/lib/components/TextInput"));

var _Bank = _interopRequireDefault(require("../../../common/records/Bank"));

var _BankSelection = _interopRequireDefault(require("../../../common/components/resources/BankSelection"));

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));

var _Modal = _interopRequireWildcard(require("@instructure/quiz-common/lib/components/Modal"));

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

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

  function AddToBankModal() {
    var _getPrototypeOf2;

    var _this;

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

    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)(AddToBankModal)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.state = {
      bankType: 'existing',
      newBankTitle: ''
    };

    _this.addToBank = function (bankId) {
      _this.props.getEntry().then(function (entry) {
        return _this.props.createBankEntry(bankId, _this.props.entryType, entry.id);
      }).then(_this.props.onAdd);
    };

    _this.continueAction = function () {
      _this.props.closeModal();

      _this.props.onContinue();

      if (_this.state.bankType === 'new') {
        var newBank = _Bank.default.create({
          title: _this.state.newBankTitle,
          language: _this.context.locale
        });

        _this.props.createBank(newBank).then(function (bankData) {
          _this.addToBank(bankData.id);
        });
      } else {
        _this.addToBank(_this.props.selectedBank.id);
      }
    };

    _this.closeAction = function () {
      _this.props.closeModal();
    };

    _this.onBankSelection = function (e, option) {
      _this.props.uiSet(_constants.ADD_TO_BANK_MODAL_BANK_SELECTION, option.value);
    };

    _this.handleRadioChange = function (event, value) {
      _this.setState({
        bankType: value
      });
    };

    _this.onTitleChange = function (e) {
      _this.setState({
        newBankTitle: e.target.value
      });
    };

    return _this;
  }

  (0, _createClass2.default)(AddToBankModal, [{
    key: "cancelButton",
    value: function cancelButton() {
      return _react.default.createElement(_Button.default, {
        onClick: this.closeAction,
        margin: _constants.XSMALL_SIDE_MARGIN
      }, "Cancel");
    }
  }, {
    key: "addToBankButton",
    value: function addToBankButton() {
      var _this$state = this.state,
          bankType = _this$state.bankType,
          newBankTitle = _this$state.newBankTitle;
      var disabled = bankType === 'existing' && !this.props.selectedBank || bankType === 'new' && (!newBankTitle || !newBankTitle.trim());
      return _react.default.createElement(_Button.default, {
        type: "button",
        variant: "primary",
        onClick: this.continueAction,
        disabled: disabled,
        margin: _constants.XSMALL_SIDE_MARGIN,
        "data-automation": "sdk-add-to-bank-button"
      }, "Add");
    }
  }, {
    key: "renderBankTypeContent",
    value: function renderBankTypeContent() {
      if (this.state.bankType === 'existing') {
        return _react.default.createElement(_BankSelection.default, {
          onBankSelection: this.onBankSelection,
          selectedBank: this.props.selectedBank,
          "data-automation": "sdk-bank-selection",
          visibleOptionsCount: 3
        });
      }

      return _react.default.createElement(_TextInput.default, {
        onChange: this.onTitleChange,
        value: this.state.newBankTitle,
        label: "New Bank Title",
        type: "text"
      });
    }
  }, {
    key: "renderContent",
    value: function renderContent() {
      return _react.default.createElement("div", null, _react.default.createElement(_RadioInputGroup.default, {
        onChange: this.handleRadioChange,
        name: "Bank Type",
        defaultValue: this.state.bankType,
        description: _react.default.createElement(_ScreenReaderContent.default, null, "Bank Type")
      }, _react.default.createElement(_RadioInput.default, {
        value: "existing",
        label: "Existing item bank"
      }), _react.default.createElement(_RadioInput.default, {
        value: "new",
        label: "New item bank"
      })), _react.default.createElement("br", null), this.renderBankTypeContent());
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement(_Modal.default, {
        open: this.props.modalOpen,
        onDismiss: this.closeAction,
        size: "small",
        label: this.props.label,
        "data-automation": "sdk-add-to-bank-modal"
      }, _react.default.createElement(_Modal.ModalHeader, null, _react.default.createElement(_Heading.default, {
        level: "reset",
        as: "h2"
      }, this.props.label), _react.default.createElement(_CloseButton.default, {
        onClick: this.closeAction,
        placement: "end",
        offset: "medium",
        variant: "icon"
      }, "Close")), _react.default.createElement(_Modal.ModalBody, null, this.renderContent()), _react.default.createElement(_Modal.ModalFooter, null, this.cancelButton(), this.addToBankButton()));
    }
  }]);
  AddToBankModal.displayName = "AddToBankModal";
  return AddToBankModal;
}(_react.Component);

exports.default = AddToBankModal;
AddToBankModal.propTypes = {
  closeModal: _propTypes.default.func.isRequired,
  createBank: _propTypes.default.func.isRequired,
  createBankEntry: _propTypes.default.func.isRequired,
  // Create the bank entry's entry, or clone it if it already exists. Should
  // always be provided when a source is provided.
  // eslint-disable-next-line react/no-unused-prop-types
  entryId: _propTypes.default.string.isRequired,
  // Only present for use in modalOpen key
  entryType: _propTypes.default.string.isRequired,
  // Resolve to the bank entry's entry, or create it if it does not yet exist.
  getEntry: _propTypes.default.func.isRequired,
  label: _propTypes.default.string.isRequired,
  modalOpen: _propTypes.default.bool.isRequired,
  // TODO: Figure out if we need to focus this on close
  modalTrigger: _propTypes.default.instanceOf(Element),
  onAdd: _propTypes.default.func,
  onContinue: _propTypes.default.func,
  selectedBank: _reactImmutableProptypes.default.record,
  uiSet: _propTypes.default.func.isRequired
};
AddToBankModal.defaultProps = {
  onAdd: function onAdd() {},
  onContinue: function onContinue() {},
  selectedBank: null,
  modalTrigger: null
};
AddToBankModal.contextTypes = {
  locale: _propTypes.default.string
};