'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 _class, _temp2;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

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

var _Button2 = _interopRequireDefault(_Button);

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

var _CloseButton2 = _interopRequireDefault(_CloseButton);

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

var _Heading2 = _interopRequireDefault(_Heading);

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

var _RadioInputGroup2 = _interopRequireDefault(_RadioInputGroup);

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

var _RadioInput2 = _interopRequireDefault(_RadioInput);

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

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

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

var _TextInput2 = _interopRequireDefault(_TextInput);

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

var _Bank2 = _interopRequireDefault(_Bank);

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

var _BankSelection2 = _interopRequireDefault(_BankSelection);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _Modal = require('../../../common/components/Modal');

var _Modal2 = _interopRequireDefault(_Modal);

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

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

var AddToBankModal = (_temp2 = _class = function (_Component) {
  (0, _inherits3.default)(AddToBankModal, _Component);

  function AddToBankModal() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = AddToBankModal.__proto__ || Object.getPrototypeOf(AddToBankModal)).call.apply(_ref, [this].concat(args))), _this), _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 = _Bank2.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 });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(AddToBankModal, [{
    key: 'cancelButton',
    value: function cancelButton() {
      return _react2.default.createElement(
        _Button2.default,
        { onClick: this.closeAction, margin: _constants.XSMALL_SIDE_MARGIN },
        'Canslo'
      );
    }
  }, {
    key: 'addToBankButton',
    value: function addToBankButton() {
      var _state = this.state,
          bankType = _state.bankType,
          newBankTitle = _state.newBankTitle;

      var disabled = bankType === 'existing' && !this.props.selectedBank || bankType === 'new' && (!newBankTitle || !newBankTitle.trim());
      return _react2.default.createElement(
        _Button2.default,
        {
          type: 'button',
          variant: 'primary',
          onClick: this.continueAction,
          disabled: disabled,
          margin: _constants.XSMALL_SIDE_MARGIN,
          'data-automation': 'sdk-add-to-bank-button'
        },
        'Ychwanegu'
      );
    }
  }, {
    key: 'renderBankTypeContent',
    value: function renderBankTypeContent() {
      if (this.state.bankType === 'existing') {
        return _react2.default.createElement(_BankSelection2.default, {
          onBankSelection: this.onBankSelection,
          selectedBank: this.props.selectedBank,
          'data-automation': 'sdk-bank-selection'
        });
      }
      return _react2.default.createElement(_TextInput2.default, {
        onChange: this.onTitleChange,
        value: this.state.newBankTitle,
        label: 'Teitl y Banc Newydd',
        type: 'text'
      });
    }
  }, {
    key: 'renderContent',
    value: function renderContent() {
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          _RadioInputGroup2.default,
          {
            onChange: this.handleRadioChange,
            name: 'Math o Fanc',
            defaultValue: this.state.bankType,
            description: _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              'Math o Fanc'
            )
          },
          _react2.default.createElement(_RadioInput2.default, { value: 'existing', label: 'Banciau eitemau sy\u2019n bodoli eisoes' }),
          _react2.default.createElement(_RadioInput2.default, { value: 'new', label: 'Banc eitemau newydd' })
        ),
        _react2.default.createElement('br', null),
        this.renderBankTypeContent()
      );
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        _Modal2.default,
        {
          open: this.props.modalOpen,
          onDismiss: this.closeAction,
          size: 'small',
          label: this.props.label,
          'data-automation': 'sdk-add-to-bank-modal'
        },
        _react2.default.createElement(
          _Modal.ModalHeader,
          null,
          _react2.default.createElement(
            _Heading2.default,
            { level: 'reset', as: 'h2' },
            this.props.label
          ),
          _react2.default.createElement(_CloseButton2.default, {
            onClick: this.closeAction,
            placement: 'end',
            offset: 'medium',
            variant: 'icon'
          })
        ),
        _react2.default.createElement(
          _Modal.ModalBody,
          null,
          this.renderContent()
        ),
        _react2.default.createElement(
          _Modal.ModalFooter,
          null,
          this.cancelButton(),
          this.addToBankButton()
        )
      );
    }
  }]);
  AddToBankModal.displayName = 'AddToBankModal'
  ;
  return AddToBankModal;
}(_react.Component), _class.propTypes = {
  closeModal: _propTypes2.default.func.isRequired,
  createBank: _propTypes2.default.func.isRequired,
  createBankEntry: _propTypes2.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: _propTypes2.default.string.isRequired, // Only present for use in modalOpen key
  entryType: _propTypes2.default.string.isRequired,
  // Resolve to the bank entry's entry, or create it if it does not yet exist.
  getEntry: _propTypes2.default.func.isRequired,
  label: _propTypes2.default.string.isRequired,
  modalOpen: _propTypes2.default.bool.isRequired,
  // TODO: Figure out if we need to focus this on close
  modalTrigger: _propTypes2.default.instanceOf(Element),
  onAdd: _propTypes2.default.func,
  onContinue: _propTypes2.default.func,
  selectedBank: _reactImmutableProptypes2.default.record,
  uiSet: _propTypes2.default.func.isRequired
}, _class.defaultProps = {
  onAdd: function onAdd() {},
  onContinue: function onContinue() {},
  selectedBank: null,
  modalTrigger: null
}, _class.contextTypes = {
  locale: _propTypes2.default.string
}, _temp2);
exports.default = AddToBankModal;