'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;

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 _NumberInput = require('@instructure/ui-forms/lib/components/NumberInput');

var _NumberInput2 = _interopRequireDefault(_NumberInput);

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 _IconDiscussionLine = require('instructure-icons/lib/Line/IconDiscussionLine');

var _IconDiscussionLine2 = _interopRequireDefault(_IconDiscussionLine);

var _IconDiscussionSolid = require('instructure-icons/lib/Solid/IconDiscussionSolid');

var _IconDiscussionSolid2 = _interopRequireDefault(_IconDiscussionSolid);

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

var _interactionPoints2 = _interopRequireDefault(_interactionPoints);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

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

var _EntrySave2 = _interopRequireDefault(_EntrySave);

var _constants = require('../../../../../../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._20rNUQvCkliAx7SwuJbFYN {\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._3mlopqhqbrpYrrZHwjaMfv {\n  flex: 8 0 0;\n  display: inline-flex;\n  flex-wrap: nowrap;\n  align-items: center;\n}\n\n._2vv7DraFsucjpknd0kfLxD {\n  flex: 0 0 auto;\n  display: inline-flex;\n  text-align: right;\n}\n\n[dir="ltr"] ._2vv7DraFsucjpknd0kfLxD {\n  text-align: right;\n}\n\n[dir="rtl"] ._2vv7DraFsucjpknd0kfLxD {\n  text-align: right;\n}\n\n.iZW37t7QwiHmto1jGON3f,\n._2L3H5zfTNerRHthcCA3WX4 {\n  display: flex;\n}\n\n._2L3H5zfTNerRHthcCA3WX4 {\n  margin-left: ' + theme.feedbackSectionLeftMargin + ';\n}\n\n._2GNiI3_-prNEr1xmV2m0Iw {\n  width: 6rem;\n  font-size: ' + theme.pointsInputFontSize + ';\n  display: inline-flex;\n}\n\n.kJJz1B7sv2SVS7pvuo90s {\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': '_20rNUQvCkliAx7SwuJbFYN',
  'leftFooter': '_3mlopqhqbrpYrrZHwjaMfv',
  'rightFooter': '_2vv7DraFsucjpknd0kfLxD',
  'pointsSection': 'iZW37t7QwiHmto1jGON3f',
  'feedbackSection': '_2L3H5zfTNerRHthcCA3WX4',
  'pointsInput': '_2GNiI3_-prNEr1xmV2m0Iw',
  'pointsText': 'kJJz1B7sv2SVS7pvuo90s'
};


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));

    _this.addFeedbackButton = null;

    _this.clearModifications = function () {
      _this.props.clearModifications('items', _this.props.entry.id);
    };

    _this.openFeedbackModal = function () {
      var workingEntry = _this.props.workingEntry;

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

    _this.handlePointsBlur = function () {
      _this.setState({ points: _this.state.points || '0' });
    };

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

    _this.handleButtonRef = function (node) {
      _this.addFeedbackButton = node;
    };

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

  (0, _createClass3.default)(QuizEntryEditFooter, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.pointsDisabled(nextProps) && this.state.points !== this.getPoints(nextProps)) {
        this.setState({ points: this.getPoints(nextProps) });
      }
    }
  }, {
    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 = workingEntry.hasFeedback() ? _IconDiscussionSolid2.default : _IconDiscussionLine2.default;

      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,
            (0, _formatMessage2.default)('Edit Item Level Feedback')
          )
        )
      );
    }
  }, {
    key: 'renderPointsSection',
    value: function renderPointsSection() {
      return _react2.default.createElement(
        'div',
        { className: styles.pointsSection },
        _react2.default.createElement(
          'span',
          { className: styles.pointsInput },
          _react2.default.createElement(_NumberInput2.default, {
            label: _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              (0, _formatMessage2.default)('Points Possible Input')
            ),
            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 },
          (0, _formatMessage2.default)('Points')
        )
      );
    }
  }, {
    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,
  clearModifications: _propTypes2.default.func.isRequired,
  disableSubmit: _propTypes2.default.bool.isRequired,
  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,
  shouldClone: false,
  initialFocusId: null
}, _temp)) || _class);
exports.default = QuizEntryEditFooter;