'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 _View = require('@instructure/ui-layout/lib/components/View');

var _View2 = _interopRequireDefault(_View);

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

var _RadioInput2 = _interopRequireDefault(_RadioInput);

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

var _RadioInputGroup2 = _interopRequireDefault(_RadioInputGroup);

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

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

var _NumberInput = require('@instructure/ui-forms/lib/components/NumberInput');

var _NumberInput2 = _interopRequireDefault(_NumberInput);

var _Text = require('@instructure/ui-elements/lib/components/Text');

var _Text2 = _interopRequireDefault(_Text);

var _Grid = require('@instructure/ui-layout/lib/components/Grid');

var _Grid2 = _interopRequireDefault(_Grid);

var _Alert = require('@instructure/ui-alerts/lib/components/Alert');

var _Alert2 = _interopRequireDefault(_Alert);

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

var _lib2 = _interopRequireDefault(_lib);

var _EntrySave = require('../../../../../../common/components/resources/entry/EntrySave');

var _EntrySave2 = _interopRequireDefault(_EntrySave);

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

var _BankSelection2 = _interopRequireDefault(_BankSelection);

var _QuizEntry = require('../../../../../../common/records/QuizEntry');

var _QuizEntry2 = _interopRequireDefault(_QuizEntry);

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

var _Bank2 = _interopRequireDefault(_Bank);

var _theme = require('./theme');

var _theme2 = _interopRequireDefault(_theme);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

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

var styles = {
  template: function template(theme) {
    return '/*  imported from styles.css  */\n\n._2jKDaPOcxEo6YXUTdK5RIZ {\n  margin: ' + theme.marginAddMargin + ';\n}\n\n._3X2PPkvOiPuWyNr15ZphfI {\n  background-color: ' + theme.quizEntryBankEditBackgroundColor + ';\n  border: ' + theme.quizEntryBankEditBorderSize + ' dashed ' + theme.quizEntryBankEditBorderColor + ';\n  padding: ' + theme.quizEntryBankEditPadding + ';\n  margin: ' + theme.quizEntryBankEditMargin + ';\n}\n\n._1JhklNMifMDDnAys59VG8a {\n  text-align: left;\n}\n\n[dir="ltr"] ._1JhklNMifMDDnAys59VG8a {\n  text-align: left;\n}\n\n[dir="rtl"] ._1JhklNMifMDDnAys59VG8a {\n  text-align: left;\n}\n\n._3W4XhVjiW2quVfgPkKcwv1 {\n  font-size: ' + theme.numberInputFontSize + ';\n  display: inline-flex;\n  padding: ' + theme.numberInputPadding + ';\n  padding-bottom: 0;\n  padding-left: ' + theme.numberInputLeftPadding + ';\n}\n\n._3UPwPhRdAwgkC812n5lS1G {\n  margin-top: ' + theme.borderLineTopMargin + ';\n  margin-bottom: ' + theme.borderLineBottomMargin + ';\n  border-bottom: solid ' + theme.borderLineBottomBorderSize + ' ' + theme.borderLineBottomBorderColor + ';\n}\n';
  },
  'marginAdd': '_2jKDaPOcxEo6YXUTdK5RIZ',
  'quizEntryBankEdit': '_3X2PPkvOiPuWyNr15ZphfI',
  'quizEntryBankText': '_1JhklNMifMDDnAys59VG8a',
  'numberInput': '_3W4XhVjiW2quVfgPkKcwv1',
  'borderLine': '_3UPwPhRdAwgkC812n5lS1G'
};

var _ref2 = _react2.default.createElement('br', null);

var _ref3 = _react2.default.createElement('br', null);

var QuizEntryBankEdit = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(QuizEntryBankEdit, _Component);

  function QuizEntryBankEdit() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = QuizEntryBankEdit.__proto__ || Object.getPrototypeOf(QuizEntryBankEdit)).call.apply(_ref, [this].concat(args))), _this), _this.clearChanges = function () {
      _this.props.clearModifications('quizEntries', _this.props.quizEntry.id);
    }, _this.handlePointsChange = function (event, points, normalizedPoints) {
      _this.props.changeQuizEntryPoints(_this.props.quizEntry.id, normalizedPoints || '0');
    }, _this.onPropertiesChange = function (properties) {
      _this.props.changeQuizEntryProperties(_this.props.quizEntry.id, properties);
    }, _this.onBankSelection = function (event, option) {
      _this.props.changeQuizEntryEntry(_this.props.quizEntry.id, option.value);
    }, _this.handleQuestionChange = function (event, selection) {
      _this.onPropertiesChange({ sampleNum: _this.props.sampleNum, selection: selection });
    }, _this.handleSampleNumChange = function (event, sampleNum, normalizedSampleNum) {
      _this.onPropertiesChange({
        sampleNum: normalizedSampleNum || '0',
        selection: _this.props.questionSelection
      });
    }, _this.sampleNumErrors = function () {
      return _this.props.workingQuizEntry.sampleNumErrors();
    }, _this.pointsPossibleErrors = function () {
      return _this.props.workingQuizEntry.pointsPossibleErrors();
    }, _this.submitHandler = function () {
      var properties = {};
      if (_this.props.questionSelection === 'all') {
        properties.sampleNum = null;
      } else {
        properties.sampleNum = _this.props.sampleNum;
      }
      _this.props.updateQuizEntry(_this.props.quizId, _this.props.quizEntry.id, {
        properties: properties,
        pointsPossible: _this.props.pointsPossible,
        entryId: _this.props.workingBank.id
      });
      _this.props.clearModifications();
    }, _this.renderPointsPossibleRow = function () {
      return _react2.default.createElement(
        _Grid.GridRow,
        null,
        _react2.default.createElement(
          _Grid.GridCol,
          { width: 3 },
          _react2.default.createElement(
            _Text2.default,
            null,
            (0, _formatMessage2.default)('Points per question')
          )
        ),
        _react2.default.createElement(
          _Grid.GridCol,
          { width: 9 },
          _react2.default.createElement(_NumberInput2.default, {
            label: _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              (0, _formatMessage2.default)('Points per question')
            ),
            onChange: _this.handlePointsChange,
            defaultValue: _this.props.pointsPossible,
            width: '5rem',
            inline: true,
            messages: _this.pointsPossibleErrors()
          })
        )
      );
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(QuizEntryBankEdit, [{
    key: 'renderQuestionSelectRadioGroup',
    value: function renderQuestionSelectRadioGroup() {
      return _react2.default.createElement(
        _RadioInputGroup2.default,
        {
          name: 'questionSelect',
          defaultValue: this.props.questionSelection,
          onChange: this.handleQuestionChange
        },
        _react2.default.createElement(_RadioInput2.default, { key: 'all', value: 'all', label: (0, _formatMessage2.default)('Use all questions') }),
        _react2.default.createElement(_RadioInput2.default, { key: 'rand', value: 'rand', label: (0, _formatMessage2.default)('Randomly select questions') })
      );
    }
  }, {
    key: 'renderRandomQuestionSelectionRow',
    value: function renderRandomQuestionSelectionRow() {
      if (this.props.questionSelection === 'all') {
        return;
      }

      return _react2.default.createElement(
        _Grid.GridRow,
        null,
        _react2.default.createElement(
          _Grid.GridCol,
          { width: 3 },
          _react2.default.createElement(
            _Text2.default,
            null,
            (0, _formatMessage2.default)('Number of questions')
          )
        ),
        _react2.default.createElement(
          _Grid.GridCol,
          { width: 9 },
          _react2.default.createElement(_NumberInput2.default, {
            label: _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              (0, _formatMessage2.default)('Number of questions')
            ),
            onChange: this.handleSampleNumChange,
            defaultValue: this.props.sampleNum,
            min: 1,
            width: '5rem',
            inline: true,
            messages: this.sampleNumErrors()
          })
        )
      );
    }
  }, {
    key: 'renderQuestionNumberInputs',
    value: function renderQuestionNumberInputs() {
      return _react2.default.createElement(
        _Grid2.default,
        { vAlign: 'middle', rowSpacing: 'small' },
        this.renderRandomQuestionSelectionRow(),
        this.renderPointsPossibleRow()
      );
    }
  }, {
    key: 'renderContent',
    value: function renderContent() {
      return _react2.default.createElement(
        'div',
        { className: styles.quizEntryBankText },
        _react2.default.createElement(_BankSelection2.default, {
          selectedBank: this.props.workingBank,
          onBankSelection: this.onBankSelection
        }),
        _ref2,
        this.renderQuestionSelectRadioGroup(),
        _ref3,
        this.renderQuestionNumberInputs()
      );
    }
  }, {
    key: 'renderErrors',
    value: function renderErrors() {
      if (this.props.workingBank.archived) {
        return _react2.default.createElement(
          _Alert2.default,
          { variant: 'error' },
          _react2.default.createElement(
            _Text2.default,
            null,
            (0, _formatMessage2.default)('Item bank no longer exists!')
          )
        );
      }
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { className: styles.quizEntryBankEdit },
        this.renderErrors(),
        this.renderContent(),
        _react2.default.createElement('div', { className: styles.borderLine }),
        _react2.default.createElement(
          _View2.default,
          { textAlign: 'end' },
          _react2.default.createElement(_EntrySave2.default, {
            clearChanges: this.clearChanges,
            displayPosition: this.props.displayPosition,
            disableSubmit: !this.props.workingQuizEntry.isValid(),
            entry: this.props.workingBank,
            guid: this.props.guid,
            submitHandler: this.submitHandler
          })
        )
      );
    }
  }]);
  QuizEntryBankEdit.displayName = 'QuizEntryBankEdit'
  ;
  return QuizEntryBankEdit;
}(_react.Component), _class2.propTypes = {
  changeQuizEntryPoints: _propTypes2.default.func.isRequired,
  changeQuizEntryProperties: _propTypes2.default.func.isRequired,
  changeQuizEntryEntry: _propTypes2.default.func.isRequired,
  clearModifications: _propTypes2.default.func.isRequired,
  displayPosition: _propTypes2.default.number.isRequired,
  guid: _propTypes2.default.string.isRequired, // used for makeEditable
  pointsPossible: _propTypes2.default.string.isRequired,
  questionSelection: _propTypes2.default.string.isRequired,
  quizEntry: _propTypes2.default.instanceOf(_QuizEntry2.default).isRequired,
  quizId: _propTypes2.default.string.isRequired,
  sampleNum: _propTypes2.default.string.isRequired,
  updateQuizEntry: _propTypes2.default.func.isRequired,
  workingBank: _propTypes2.default.instanceOf(_Bank2.default).isRequired,
  workingQuizEntry: _propTypes2.default.instanceOf(_QuizEntry2.default).isRequired
}, _temp2)) || _class);
exports.default = QuizEntryBankEdit;