'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, _temp, _initialiseProps;

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 _ScreenReaderContent = require('@instructure/ui-a11y/lib/components/ScreenReaderContent');

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

var _quizNumberInput = require('@instructure/quiz-number-input');

var _quizNumberInput2 = _interopRequireDefault(_quizNumberInput);

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

var _Button2 = _interopRequireDefault(_Button);

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

var _lib2 = _interopRequireDefault(_lib);

var _IconDiscussion = require('@instructure/ui-icons/lib/Line/IconDiscussion');

var _IconDiscussion2 = _interopRequireDefault(_IconDiscussion);

var _IconDiscussion3 = require('@instructure/ui-icons/lib/Solid/IconDiscussion');

var _IconDiscussion4 = _interopRequireDefault(_IconDiscussion3);

var _interactionPoints = require('quiz-interactions/lib/util/interactionPoints');

var _interactionPoints2 = _interopRequireDefault(_interactionPoints);

var _formatMessage = require('@instructure/quiz-common/lib/format-message');

var _formatMessage2 = _interopRequireDefault(_formatMessage);

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

var _EntrySave2 = _interopRequireDefault(_EntrySave);

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

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

var _theme2 = _interopRequireDefault(_theme);

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

var styles = {
  template: function template(theme) {
    return '/*  imported from styles.css  */\n\n.Footer__styles__footer {\n  background-color: ' + theme.footerBackgroundColor + ';\n  color: ' + theme.footerColor + ';\n\n  padding: ' + theme.footerPadding + ';\n\n  display: flex;\n  justify-content: space-between;\n  vertical-align: middle;\n  align-items: center;\n}\n\n.Footer__styles__leftFooter {\n  flex: 8 0 0;\n  display: inline-flex;\n  flex-wrap: nowrap;\n  align-items: center;\n}\n\n.Footer__styles__rightFooter {\n  flex: 0 0 auto;\n  display: inline-flex;\n  text-align: right;\n}\n\n[dir="ltr"] .Footer__styles__rightFooter {\n  text-align: right;\n}\n\n[dir="rtl"] .Footer__styles__rightFooter {\n  text-align: right;\n}\n\n.Footer__styles__pointsSection,\n.Footer__styles__feedbackSection {\n  display: flex;\n}\n\n.Footer__styles__feedbackSection {\n  margin-left: ' + theme.feedbackSectionLeftMargin + ';\n}\n\n.Footer__styles__pointsInput {\n  width: 6rem;\n  font-size: ' + theme.pointsInputFontSize + ';\n  display: inline-flex;\n}\n\n.Footer__styles__pointsText {\n  display: inline-flex;\n  font-size: ' + theme.pointsTextFontSize + ';\n  align-self: center;\n  vertical-align: middle;\n  margin-left: ' + theme.pointsTextLeftMargin + ';\n}\n';
  },
  'footer': 'Footer__styles__footer',
  'leftFooter': 'Footer__styles__leftFooter',
  'rightFooter': 'Footer__styles__rightFooter',
  'pointsSection': 'Footer__styles__pointsSection',
  'feedbackSection': 'Footer__styles__feedbackSection',
  'pointsInput': 'Footer__styles__pointsInput',
  'pointsText': 'Footer__styles__pointsText'
};


function pointsAsFloat(pointsString) {
  return parseFloat(pointsString) || 0;
}

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

  function QuizEntryEditFooter() {
    (0, _classCallCheck3.default)(this, QuizEntryEditFooter);

    var _this = (0, _possibleConstructorReturn3.default)(this, (QuizEntryEditFooter.__proto__ || Object.getPrototypeOf(QuizEntryEditFooter)).apply(this, arguments));

    _initialiseProps.call(_this);

    var points = _this.getPoints();
    _this.state = {
      points: points,
      normalizedPoints: points
    };
    return _this;
  }

  (0, _createClass3.default)(QuizEntryEditFooter, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var points = this.getPoints(nextProps);
      this.setState({
        points: points,
        normalizedPoints: points
      });
    }
  }, {
    key: 'getPoints',
    value: function getPoints() {
      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
      var _props$workingQuizEnt = props.workingQuizEntry,
          regradeAdjustedPointsPossible = _props$workingQuizEnt.regradeAdjustedPointsPossible,
          pointsPossible = _props$workingQuizEnt.pointsPossible;

      return regradeAdjustedPointsPossible || pointsPossible || 0;
    }
  }, {
    key: 'pointsDisabled',
    value: function pointsDisabled() {
      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
      var workingEntry = props.workingEntry;

      var pointsFromItem = (0, _interactionPoints2.default)(workingEntry.toJS()) !== void 0;
      return pointsFromItem;
    }
  }, {
    key: 'renderFeedbackSection',
    value: function renderFeedbackSection() {
      var _props = this.props,
          entry = _props.entry,
          shouldClone = _props.shouldClone,
          quizEntry = _props.quizEntry,
          workingEntry = _props.workingEntry;

      var disabled = entry.isImmutable() && !shouldClone || quizEntry.isBankEntry;
      var icon = void 0,
          text = void 0;
      if (workingEntry.hasFeedback()) {
        icon = _IconDiscussion4.default;
        text = 'Edit Item Level Feedback (present)';
      } else {
        icon = _IconDiscussion2.default;
        text = 'Feedback itemniveau bewerken';
      }

      return _react2.default.createElement(
        'div',
        { className: styles.feedbackSection },
        _react2.default.createElement(
          _Button2.default,
          {
            variant: 'icon',
            onClick: this.openFeedbackModal,
            disabled: disabled,
            ref: this.handleButtonRef,
            'data-automation': 'sdk-open-feedback-modal-button',
            icon: icon
          },
          _react2.default.createElement(
            _ScreenReaderContent2.default,
            null,
            text
          )
        )
      );
    }
  }, {
    key: 'renderPointsSection',
    value: function renderPointsSection() {
      return _react2.default.createElement(
        'div',
        { className: styles.pointsSection },
        _react2.default.createElement(
          'span',
          { className: styles.pointsInput },
          _react2.default.createElement(_quizNumberInput2.default, {
            label: _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              'Invoer mogelijke punten'
            ),
            onChange: this.handlePointsChange,
            onBlur: this.handlePointsBlur,
            value: this.state.points,
            disabled: this.pointsDisabled(),
            'data-automation': 'sdk-points-possible-numberinput'
          })
        ),
        _react2.default.createElement(
          'span',
          { className: styles.pointsText },
          'Punten'
        )
      );
    }
  }, {
    key: 'renderLeftFooter',
    value: function renderLeftFooter() {
      return _react2.default.createElement(
        'div',
        { className: styles.leftFooter },
        this.renderPointsSection(),
        this.renderFeedbackSection()
      );
    }
  }, {
    key: 'renderRightFooter',
    value: function renderRightFooter() {
      if (this.props.alternativeRightFooter) {
        return this.props.alternativeRightFooter();
      }

      return _react2.default.createElement(_EntrySave2.default, {
        clearChanges: this.props.clearChanges,
        disableSubmit: this.props.disableSubmit,
        displayPosition: this.props.displayPosition,
        entry: this.props.entry,
        guid: this.props.guid,
        isValid: this.props.isValid,
        submitHandler: this.props.successfulSubmit,
        initialFocusId: this.props.initialFocusId
      });
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { className: styles.footer },
        this.renderLeftFooter(),
        this.renderRightFooter()
      );
    }
  }]);
  QuizEntryEditFooter.displayName = 'QuizEntryEditFooter'
  ;
  return QuizEntryEditFooter;
}(_react.Component), _class2.propTypes = {
  alternativeRightFooter: _propTypes2.default.func,
  changeQuizEntryPoints: _propTypes2.default.func.isRequired,
  clearChanges: _propTypes2.default.func.isRequired,
  disableSubmit: _propTypes2.default.bool,
  displayPosition: _propTypes2.default.number.isRequired,
  entry: _reactImmutableProptypes2.default.record.isRequired,
  guid: _propTypes2.default.string.isRequired,
  initialFocusId: _propTypes2.default.string,
  isValid: _propTypes2.default.bool.isRequired,
  openModal: _propTypes2.default.func.isRequired,
  quizEntry: _reactImmutableProptypes2.default.record.isRequired,
  setUi: _propTypes2.default.func.isRequired,
  shouldClone: _propTypes2.default.bool,
  successfulSubmit: _propTypes2.default.func.isRequired,
  workingEntry: _reactImmutableProptypes2.default.record.isRequired,
  // This prop is flagged as unused, but it is actually used
  // eslint-disable-next-line react/no-unused-prop-types
  workingQuizEntry: _reactImmutableProptypes2.default.record.isRequired
}, _class2.defaultProps = {
  alternativeRightFooter: null,
  disableSubmit: false,
  shouldClone: false,
  initialFocusId: null
}, _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.addFeedbackButton = null;

  this.openFeedbackModal = function () {
    var workingEntry = _this2.props.workingEntry;

    _this2.props.setUi(_constants.ITEM_FEEDBACK_MODAL_ITEM, workingEntry);
    _this2.props.setUi(_constants.ITEM_FEEDBACK_MODAL_FEEDBACK, workingEntry.feedback);
    _this2.props.openModal(_constants.ITEM_FEEDBACK_MODAL, { modalTrigger: _this2.addFeedbackButton });
  };

  this.handlePointsBlur = function () {
    if (!_this2.state.normalizedPoints) {
      _this2.setState({ points: '0' });
    }
  };

  this.handlePointsChange = function (event, points, normalizedPoints) {
    var pointsFloat = pointsAsFloat(normalizedPoints);
    if (pointsFloat !== _this2.getPoints()) {
      _this2.props.changeQuizEntryPoints(_this2.props.quizEntry.id, pointsFloat);
    }
    _this2.setState({ points: points, normalizedPoints: normalizedPoints });
  };

  this.handleButtonRef = function (node) {
    _this2.addFeedbackButton = node;
  };
}, _temp)) || _class);
exports.default = QuizEntryEditFooter;