'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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,
    _default_de_number = Intl.NumberFormat('de', { style: 'decimal' }).format; /* eslint "jsx-a11y/click-events-have-key-events": "warn" */


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 _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _Alert2 = _interopRequireDefault(_Alert);

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

var _Text2 = _interopRequireDefault(_Text);

var _View = require('@instructure/ui-layout/lib/components/View');

var _View2 = _interopRequireDefault(_View);

var _PresentationContent = require('@instructure/ui-a11y/lib/components/PresentationContent');

var _PresentationContent2 = _interopRequireDefault(_PresentationContent);

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

var _lib2 = _interopRequireDefault(_lib);

var _RichContentRenderer = require('quiz-interactions/lib/components/common/components/rce/RichContentRenderer');

var _RichContentRenderer2 = _interopRequireDefault(_RichContentRenderer);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _PositionBox = require('../../positionBox/PositionBox');

var _PositionBox2 = _interopRequireDefault(_PositionBox);

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

var _componentForItem = require('../../../../util/componentForItem');

var _componentForItem2 = _interopRequireDefault(_componentForItem);

var _CustomPropTypes = require('../../../../util/CustomPropTypes');

var _CustomPropTypes2 = _interopRequireDefault(_CustomPropTypes);

var _keyboardClickable = require('../../../../util/keyboardClickable');

var _keyboardClickable2 = _interopRequireDefault(_keyboardClickable);

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.SessionItemResult__styles__sessionItemResult {\n  padding: ' + theme.sessionItemResultPadding + ';\n}\n\n.SessionItemResult__styles__topBorder {\n  border-top: solid ' + theme.topBorderWidth + ' ' + theme.topBorderColor + ';\n}\n\n.SessionItemResult__styles__result {\n  margin: ' + theme.resultMargin + ';\n}\n\n.SessionItemResult__styles__points {\n  color: ' + theme.pointsColor + ';\n  font-size: ' + theme.pointFontSize + ';\n}\n\n.SessionItemResult__styles__question {\n  font-size: ' + theme.questionFontSize + ';\n}\n\n.SessionItemResult__styles__sessionItemResultHeader {\n  display: flex;\n  align-items: center;\n}\n\n.SessionItemResult__styles__itemFeedbackWrapper {\n  margin-top: ' + theme.itemFeedbackWrapperMargin + ';\n  padding: ' + theme.itemFeedbackWrapperPadding + ';\n  background-color: ' + theme.itemFeedbackWrapperBackgroundColor + ';\n  border-radius: ' + theme.itemFeedbackWrapperBorderRadius + ';\n  font-size: ' + theme.itemFeedbackWrapperFontSize + ';\n  white-space: pre-wrap;\n}\n\n.SessionItemResult__styles__itemFeedbackLabel {\n  color: ' + theme.itemFeedbackLabelColor + ';\n  font-size: ' + theme.itemFeedbackLabelFontSize + ';\n  margin-bottom: ' + theme.itemFeedbackMargin + ';\n}\n\n.SessionItemResult__styles__itemFeedbackText {\n  margin-top: ' + theme.itemFeedbackTextMargin + ';\n}\n';
  },
  'sessionItemResult': 'SessionItemResult__styles__sessionItemResult',
  'topBorder': 'SessionItemResult__styles__topBorder',
  'result': 'SessionItemResult__styles__result',
  'points': 'SessionItemResult__styles__points',
  'question': 'SessionItemResult__styles__question',
  'sessionItemResultHeader': 'SessionItemResult__styles__sessionItemResultHeader',
  'itemFeedbackWrapper': 'SessionItemResult__styles__itemFeedbackWrapper',
  'itemFeedbackLabel': 'SessionItemResult__styles__itemFeedbackLabel',
  'itemFeedbackText': 'SessionItemResult__styles__itemFeedbackText'
};
var SessionItemResult = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(SessionItemResult, _Component);

  function SessionItemResult() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = SessionItemResult.__proto__ || Object.getPrototypeOf(SessionItemResult)).call.apply(_ref, [this].concat(args))), _this), _this.getWorkingInstance = function (sessionItemResult) {
      // Check for getWorkingInstance because it does not exist on results page object
      // and is only needed on the grading page
      if (sessionItemResult.getWorkingInstance) {
        return sessionItemResult.getWorkingInstance().toJS();
      }
      return sessionItemResult.toJS();
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(SessionItemResult, [{
    key: 'position',
    value: function position() {
      return this.props.sessionItem.position;
    }
  }, {
    key: 'regraded',
    value: function regraded() {
      return this.props.sessionItemResult.regradeInfo && this.props.sessionItemResult.regradeInfo.get('regraded');
    }
  }, {
    key: 'renderAlert',
    value: function renderAlert() {
      return _react2.default.createElement(
        _Alert2.default,
        {
          variant: 'warning',
          margin: 'medium'
        },
        _react2.default.createElement(
          _PresentationContent2.default,
          null,
          'Diese Frage wurde neu benotet.'
        )
      );
    }
  }, {
    key: 'renderRegradePoints',
    value: function renderRegradePoints() {
      var _s, _n, _i, _v, _s2, _n2, _i2, _v2;

      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          _View2.default,
          {
            as: 'span',
            size: 'small',
            margin: 'small'
          },
          _react2.default.createElement(
            _Text2.default,
            { color: 'secondary' },
            'Bisherige Punktzahl ' + (_s = this.props.sessionItemResult.regradeInfo.get('originalPointsPossible'), _n = +_s, (_i = Math.floor(Math.abs(+_s)), _v = (_s + '.').split('.')[1].length, _i === 1 && _v === 0 ? _default_de_number(this.props.sessionItemResult.regradeInfo.get('originalScore') || 0) + ' / ' + _default_de_number(this.props.sessionItemResult.regradeInfo.get('originalPointsPossible')) + '\xA0Punkt' : _default_de_number(this.props.sessionItemResult.regradeInfo.get('originalScore') || 0) + ' / ' + _default_de_number(this.props.sessionItemResult.regradeInfo.get('originalPointsPossible')) + '\xA0Punkte'))
          )
        ),
        _react2.default.createElement(
          _View2.default,
          {
            as: 'span',
            size: 'small',
            margin: 'small'
          },
          _react2.default.createElement(
            _Text2.default,
            { color: 'warning' },
            'Neue Punktzahl ' + (_s2 = this.props.sessionItemResult.regradeInfo.get('newPointsPossible'), _n2 = +_s2, (_i2 = Math.floor(Math.abs(+_s2)), _v2 = (_s2 + '.').split('.')[1].length, _i2 === 1 && _v2 === 0 ? _default_de_number(this.props.sessionItemResult.regradeInfo.get('newScore') || 0) + ' / ' + _default_de_number(this.props.sessionItemResult.regradeInfo.get('newPointsPossible')) + ' Punkt' : _default_de_number(this.props.sessionItemResult.regradeInfo.get('newScore') || 0) + ' / ' + _default_de_number(this.props.sessionItemResult.regradeInfo.get('newPointsPossible')) + ' Punkte'))
          )
        )
      );
    }
  }, {
    key: 'renderHeader',
    value: function renderHeader() {
      return _react2.default.createElement(
        'div',
        { className: styles.sessionItemResultHeader },
        this.renderResultPosition(),
        this.regraded() ? this.renderRegradePoints() : this.renderPoints()
      );
    }
  }, {
    key: 'renderResultPosition',
    value: function renderResultPosition() {
      var position = this.position();
      var positionText = void 0;
      if (this.regraded()) {
        positionText = 'Ergebnisse f\xFCr Objekt ' + _default_de_number(position) + '. Diese Frage wurde neu benotet.';
      } else {
        positionText = 'Ergebnisse f\xFCr Objekt ' + _default_de_number(position) + '.';
      }
      return _react2.default.createElement(_PositionBox2.default, { position: position, headingLevel: 'h3', headingText: positionText });
    }
  }, {
    key: 'renderPoints',
    value: function renderPoints() {
      return _react2.default.createElement(
        'div',
        { className: styles.points },
        this.pointsDisplayText
      );
    }
  }, {
    key: 'renderFeedbackBox',
    value: function renderFeedbackBox(feedbackContent, formattedFeedbackTitle) {
      if (feedbackContent) {
        return _react2.default.createElement(
          'div',
          { className: styles.itemFeedbackWrapper },
          _react2.default.createElement(
            'div',
            { className: styles.itemFeedbackLabel },
            formattedFeedbackTitle
          ),
          _react2.default.createElement(_RichContentRenderer2.default, {
            customStyles: styles.itemFeedbackText,
            content: feedbackContent
          })
        );
      }
    }
  }, {
    key: 'renderItemFeedback',
    value: function renderItemFeedback(simpleSessionItemResult) {
      var itemFeedback = simpleSessionItemResult.feedback.itemFeedback || {};
      var correctFeedback = this.renderFeedbackBox(itemFeedback.correct, 'Richtiges Feedback');
      var incorrectFeedback = this.renderFeedbackBox(itemFeedback.incorrect, 'Falsches Feedback');
      var neutralFeedback = this.renderFeedbackBox(itemFeedback.neutral, 'Allgemeines Feedback');

      if (correctFeedback || incorrectFeedback || neutralFeedback) {
        return _react2.default.createElement(
          'div',
          null,
          correctFeedback,
          incorrectFeedback,
          neutralFeedback
        );
      }
    }
  }, {
    key: 'renderGraderFeedback',
    value: function renderGraderFeedback(simpleSessionItemResult) {
      var graderFeedback = simpleSessionItemResult.feedback.graderFeedback || {};
      if (!this.props.hideGraderFeedback && graderFeedback.content) {
        if (this.props.editGraderFeedback) {
          return _react2.default.createElement(
            'div',
            {
              role: 'button',
              onClick: this.props.editGraderFeedback,
              onKeyDown: _keyboardClickable2.default,
              className: styles.itemFeedbackWrapper,
              tabIndex: '0'
            },
            _react2.default.createElement(
              'div',
              { className: styles.itemFeedbackLabel },
              'Benoter-Feedback'
            ),
            _react2.default.createElement(_RichContentRenderer2.default, {
              customStyles: styles.itemFeedbackText,
              content: graderFeedback.content
            })
          );
        } else {
          return this.renderFeedbackBox(graderFeedback.content, 'Benoter-Feedback');
        }
      }
    }
  }, {
    key: 'renderSessionItemResult',
    value: function renderSessionItemResult() {
      var _props = this.props,
          appContainer = _props.appContainer,
          sessionItem = _props.sessionItem,
          sessionItemResult = _props.sessionItemResult,
          itemResultsModifications = _props.itemResultsModifications;


      if (!sessionItemResult.isLoaded()) {
        return null;
      }

      var item = sessionItem.getItem();
      var slug = item.getInteractionType && item.getInteractionType().slug;
      var ResultInteraction = (0, _componentForItem2.default)(slug, _constants.COMPONENT_RESULT);

      var simpleItem = item.toJS();
      var simpleResultsModifications = itemResultsModifications && itemResultsModifications.toJS() || {};
      var simpleSessionItem = sessionItem.toJS();
      var simpleSessionItemResult = sessionItemResult.toJS();

      return _react2.default.createElement(
        'div',
        { className: styles.result },
        _react2.default.createElement(
          'div',
          { className: styles.question },
          _react2.default.createElement(ResultInteraction, {
            appContainer: appContainer,
            itemBody: simpleItem.itemBody,
            itemId: simpleSessionItem.id // needed for input group name
            , interactionData: simpleItem.interactionData,
            properties: simpleItem.properties || {},
            scoringData: simpleSessionItem.scoringData,
            scoredData: simpleSessionItemResult.scoredData,
            itemResultsModifications: simpleResultsModifications[simpleSessionItem.id]
          })
        ),
        this.renderItemFeedback(simpleSessionItemResult),
        this.renderGraderFeedback(this.getWorkingInstance(sessionItemResult))
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _classNames;

      var classes = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, styles.sessionItemResult, true), (0, _defineProperty3.default)(_classNames, styles.topBorder, this.props.shouldRenderTopBorder), _classNames));
      return _react2.default.createElement(
        'div',
        { className: classes },
        this.regraded() ? this.renderAlert() : null,
        this.renderHeader(),
        this.renderSessionItemResult()
      );
    }
  }, {
    key: 'points',
    get: function get() {
      var sessionItemResult = this.props.sessionItemResult;

      var normalizedSessionItemResult = sessionItemResult && sessionItemResult.toJS() || {};
      return normalizedSessionItemResult.score;
    }
  }, {
    key: 'pointsPresent',
    get: function get() {
      return typeof this.points === 'number';
    }
  }, {
    key: 'pointsPossible',
    get: function get() {
      return this.props.sessionItem.pointsPossible;
    }
  }, {
    key: 'pointsPossiblePresent',
    get: function get() {
      return typeof this.pointsPossible === 'number';
    }
  }, {
    key: 'pointsDisplayText',
    get: function get() {
      var points = this.points;
      var possible = this.pointsPossible;
      if (this.pointsPresent && this.pointsPossiblePresent) {
        var _s3, _n3, _i3, _v3;

        return _s3 = possible, _n3 = +_s3, (_i3 = Math.floor(Math.abs(+_s3)), _v3 = (_s3 + '.').split('.')[1].length, _i3 === 1 && _v3 === 0 ? _default_de_number(points) + ' / ' + _default_de_number(possible) + ' Punkt' : _default_de_number(points) + ' / ' + _default_de_number(possible) + '\xA0Punkte');
      }

      if (this.pointsPossiblePresent) {
        var _s4, _n4, _i4, _v4;

        return (_s4 = possible, _n4 = +_s4, (_i4 = Math.floor(Math.abs(+_s4)), _v4 = (_s4 + '.').split('.')[1].length, _i4 === 1 && _v4 === 0 ? _default_de_number(possible) + '\xA0Punkt' : _default_de_number(possible) + '\xA0Punkte')) + ' m\xF6glich';
      }

      if (this.pointsPresent) {
        var _s5, _n5, _i5, _v5;

        return (_s5 = points, _n5 = +_s5, (_i5 = Math.floor(Math.abs(+_s5)), _v5 = (_s5 + '.').split('.')[1].length, _i5 === 1 && _v5 === 0 ? _default_de_number(points) + '\xA0Punkt' : _default_de_number(points) + '\xA0Punkte')) + ' verdient';
      }

      return '';
    }
  }]);
  SessionItemResult.displayName = 'SessionItemResult'
  ;
  return SessionItemResult;
}(_react.Component), _class2.propTypes = {
  appContainer: _CustomPropTypes2.default.selectors.isRequired,
  editGraderFeedback: _propTypes2.default.func,
  hideGraderFeedback: _propTypes2.default.bool,
  itemResultsModifications: _reactImmutableProptypes2.default.map,
  sessionItem: _reactImmutableProptypes2.default.record.isRequired,
  sessionItemResult: _reactImmutableProptypes2.default.record.isRequired,
  shouldRenderTopBorder: _propTypes2.default.bool
}, _class2.defaultProps = {
  editGraderFeedback: null,
  hideGraderFeedback: false,
  itemResultsModifications: null,
  shouldRenderTopBorder: true
}, _temp2)) || _class);
exports.default = SessionItemResult;