"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));

var _AccessibleContent = _interopRequireDefault(require("@instructure/ui-a11y/lib/components/AccessibleContent"));

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

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

var _Progress = _interopRequireDefault(require("@instructure/ui-elements/lib/components/Progress"));

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

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

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

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));

var _FormattedDuration = _interopRequireDefault(require("../../../shared/FormattedDuration"));

var _formatTimespan = require("../../../../util/formatTimespan");

var _theme = _interopRequireDefault(require("./theme"));

var _dec,
    _class,
    _class2,
    _temp,
    _default_daXK12_number = Intl.NumberFormat("da-x-k12", { style: "decimal" }).format;

var styles = {
  componentId: 'dZbOF',
  template: function template(theme) {
    return "\n\n.quiz-core__Info--alertWrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  margin-top: ".concat(theme.alertWrapperMargin || 'inherit', ";\n}\n\n.quiz-core__Info--alertWidth {\n  width: 300px;\n}\n\n.quiz-core__Info--wrapper {\n  padding: none;\n  margin: none;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n}\n\n.quiz-core__Info--info {\n  align-self: center;\n\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n}\n\n.quiz-core__Info--scoreStats {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-start;\n  flex: 1 1 auto;\n}\n\n.quiz-core__Info--score {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n\n  margin: ").concat(theme.scoreMargin || 'inherit', ";\n  height: 150px;\n  width: 150px;\n\n  \n  z-index: ").concat(theme.scoreZIndex || 'inherit', ";\n}\n\n.quiz-core__Info--scorePercentage {\n  font-size: ").concat(theme.scorePercentageFontSize || 'inherit', ";\n  font-weight: ").concat(theme.scorePercentageFontWeight || 'inherit', ";\n}\n\n.quiz-core__Info--infoWrapper {\n  flex: 1 1 auto;\n  margin: ").concat(theme.infoWrapperMargin || 'inherit', ";\n  padding-left: ").concat(theme.inforWrapperPadding || 'inherit', ";\n}\n");
  },
  'alertWrapper': 'quiz-core__Info--alertWrapper',
  'alertWidth': 'quiz-core__Info--alertWidth',
  'wrapper': 'quiz-core__Info--wrapper',
  'info': 'quiz-core__Info--info',
  'scoreStats': 'quiz-core__Info--scoreStats',
  'score': 'quiz-core__Info--score',
  'scorePercentage': 'quiz-core__Info--scorePercentage',
  'infoWrapper': 'quiz-core__Info--infoWrapper'
};
var unknownPercentageValue = 'UNKNOWN_PERCENTAGE';
var Info = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Info, _Component);

  function Info(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Info);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Info).call(this, props));
    _this.progressTextFormatter = _this.progressTextFormatter.bind((0, _assertThisInitialized2.default)(_this));
    _this.progressDisplayFormatter = _this.progressDisplayFormatter.bind((0, _assertThisInitialized2.default)(_this));
    return _this;
  }

  (0, _createClass2.default)(Info, [{
    key: "progressTextFormatter",
    // needed for inst-ui Progress
    value: function progressTextFormatter(valueNow, valueMax) {
      var percentageUnknown = valueNow === unknownPercentageValue;
      return percentageUnknown ? "Ukendt resultat" : "Dit resultat var " + _formatMessage.default.number(valueNow, 'percent') + ".";
    } // needed for inst-ui Progress

  }, {
    key: "progressDisplayFormatter",
    value: function progressDisplayFormatter(valueNow, valueMax) {
      var valueToShow = valueNow === unknownPercentageValue ? "?" : _formatMessage.default.number(valueNow, 'percent');
      return _react.default.createElement("div", {
        className: styles.scorePercentage,
        "data-automation": "sdk-quiz-score-percentage"
      }, valueToShow);
    }
  }, {
    key: "renderAlert",
    value: function renderAlert() {
      var _this$props = this.props,
          quizSessionResult = _this$props.quizSessionResult,
          sessionItemResults = _this$props.sessionItemResults;
      var ungradedCount = sessionItemResults.reduce(function (count, sessionItemResult) {
        return sessionItemResult.getIn(['scoredData', 'gradeStatus']) === 'waiting' ? count + 1 : count;
      }, 0);
      var hasUngradedQuesitons = ungradedCount > 0;

      if (hasUngradedQuesitons && quizSessionResult.isLoaded()) {
        var _s, _n, _t, _i;

        var ungradedText = (_s = ungradedCount, _n = +_s, (_t = +('' + _s).replace(/^[^.]*.?|0+$/g, ''), _i = Math.floor(Math.abs(+_s)), _n === 1 || _t !== 0 && (_i === 0 || _i === 1) ? _default_daXK12_number(ungradedCount) + " sp\xF8rgsm\xE5let kr\xE6ver bed\xF8mmelse" : _default_daXK12_number(ungradedCount) + " sp\xF8rgsm\xE5l kr\xE6ver bed\xF8mmelse"));
        return _react.default.createElement("div", {
          className: styles.alertWrapper
        }, _react.default.createElement("div", {
          className: styles.alertWidth
        }, _react.default.createElement(_Alert.default, {
          variant: "info"
        }, ungradedText)));
      }
    }
  }, {
    key: "renderScoreStats",
    value: function renderScoreStats() {
      return _react.default.createElement("div", {
        className: styles.scoreStats
      }, this.renderProgress(), this.renderPointsDisplay());
    }
  }, {
    key: "renderProgress",
    value: function renderProgress() {
      if (this.pointsMissing || this.pointsPossibleMissing) {
        return null;
      }

      return _react.default.createElement("div", {
        className: styles.score,
        "data-automation": "sdk-info-score"
      }, _react.default.createElement(_Progress.default, {
        animateOnMount: true,
        size: "large",
        variant: "circle",
        label: "Dit resultat",
        formatValueText: this.progressTextFormatter,
        formatDisplayedValue: this.progressDisplayFormatter,
        valueNow: this.percentageVal,
        valueMax: 1
      }));
    }
  }, {
    key: "renderPointsDisplay",
    value: function renderPointsDisplay() {
      return _react.default.createElement("div", {
        className: styles.infoWrapper
      }, _react.default.createElement(_AccessibleContent.default, {
        alt: this.pointsText
      }, _react.default.createElement(_Text.default, {
        as: "div",
        color: "primary",
        size: "xx-large",
        weight: "bold"
      }, this.mainPointsText), _react.default.createElement(_Text.default, {
        color: "secondary"
      }, this.subPointsText)));
    }
  }, {
    key: "renderTime",
    value: function renderTime() {
      var attemptText = "Tid til dette fors\xF8g";
      var alt = "Tid for dette fors\xF8g: " + (0, _formatTimespan.formatTime)(this.props.quizSession.elapsedTime);
      return _react.default.createElement(_AccessibleContent.default, {
        alt: alt
      }, _react.default.createElement(_Text.default, {
        as: "div",
        color: "primary",
        size: "xx-large",
        weight: "bold"
      }, _react.default.createElement(_FormattedDuration.default, {
        seconds: this.props.quizSession.elapsedTime
      })), _react.default.createElement(_Text.default, {
        color: "secondary"
      }, attemptText));
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", null, this.renderAlert(), _react.default.createElement("div", {
        className: styles.wrapper
      }, _react.default.createElement("div", {
        className: styles.info
      }, _react.default.createElement(_ScreenReaderContent.default, null, _react.default.createElement(_Heading.default, {
        level: "h2"
      }, "Vurderingsstatistik")), this.renderScoreStats(), _react.default.createElement("div", {
        className: styles.infoWrapper
      }, this.renderTime()))));
    }
  }, {
    key: "points",
    get: function get() {
      return this.props.quizSessionResult.score;
    }
  }, {
    key: "pointsPresent",
    get: function get() {
      return typeof this.points === 'number';
    }
  }, {
    key: "pointsMissing",
    get: function get() {
      return !this.pointsPresent;
    }
  }, {
    key: "pointsPossible",
    get: function get() {
      return this.props.quizSessionResult.pointsPossible;
    }
  }, {
    key: "pointsPossiblePresent",
    get: function get() {
      return typeof this.pointsPossible === 'number';
    }
  }, {
    key: "pointsPossibleMissing",
    get: function get() {
      return !this.pointsPossiblePresent;
    }
  }, {
    key: "percentageVal",
    get: function get() {
      var ratio = this.props.quizSessionResult.percentage;
      return isNaN(ratio) ? unknownPercentageValue : ratio;
    }
  }, {
    key: "mainPointsText",
    get: function get() {
      if (this.pointsMissing && this.pointsPossibleMissing) {
        return '--';
      }

      var valueToUse = this.pointsPresent ? this.points : this.pointsPossible;
      return _formatMessage.default.number(valueToUse);
    }
  }, {
    key: "subPointsText",
    get: function get() {
      var _s4, _n4, _t4, _i4;

      if (this.pointsPresent && this.pointsPossiblePresent) {
        var _s2, _n2, _t2, _i2;

        return "Ud af " + (_s2 = this.pointsPossible, _n2 = +_s2, (_t2 = +('' + _s2).replace(/^[^.]*.?|0+$/g, ''), _i2 = Math.floor(Math.abs(+_s2)), _n2 === 1 || _t2 !== 0 && (_i2 === 0 || _i2 === 1) ? _default_daXK12_number(this.pointsPossible) + " point" : _default_daXK12_number(this.pointsPossible) + " point"));
      }

      if (this.pointsPresent) {
        var _s3, _n3, _t3, _i3;

        return "Fik " + (_s3 = this.points, _n3 = +_s3, (_t3 = +('' + _s3).replace(/^[^.]*.?|0+$/g, ''), _i3 = Math.floor(Math.abs(+_s3)), _n3 === 1 || _t3 !== 0 && (_i3 === 0 || _i3 === 1) ? "point" : "point"));
      } // We use "Points Possible" when only points is present or when nothing is present


      return (_s4 = this.pointsPossible, _n4 = +_s4, (_t4 = +('' + _s4).replace(/^[^.]*.?|0+$/g, ''), _i4 = Math.floor(Math.abs(+_s4)), _n4 === 1 || _t4 !== 0 && (_i4 === 0 || _i4 === 1) ? "Point" : "Point")) + " muligt";
    }
  }, {
    key: "pointsText",
    get: function get() {
      if (this.pointsPresent && this.pointsPossiblePresent) {
        var _s5, _n5, _t5, _i5;

        return _default_daXK12_number(this.points) + " Ud af " + (_s5 = this.pointsPossible, _n5 = +_s5, (_t5 = +('' + _s5).replace(/^[^.]*.?|0+$/g, ''), _i5 = Math.floor(Math.abs(+_s5)), _n5 === 1 || _t5 !== 0 && (_i5 === 0 || _i5 === 1) ? _default_daXK12_number(this.pointsPossible) + " point" : _default_daXK12_number(this.pointsPossible) + " point"));
      }

      if (this.pointsPresent) {
        var _s6, _n6, _t6, _i6;

        return "Optjent " + (_s6 = this.points, _n6 = +_s6, (_t6 = +('' + _s6).replace(/^[^.]*.?|0+$/g, ''), _i6 = Math.floor(Math.abs(+_s6)), _n6 === 1 || _t6 !== 0 && (_i6 === 0 || _i6 === 1) ? _default_daXK12_number(this.points) + " point" : _default_daXK12_number(this.points) + " point"));
      } // We use "Points Possible" when only points is present or when nothing is present


      if (this.pointsPossiblePresent) {
        var _s7, _n7, _t7, _i7;

        return (_s7 = this.pointsPossible, _n7 = +_s7, (_t7 = +('' + _s7).replace(/^[^.]*.?|0+$/g, ''), _i7 = Math.floor(Math.abs(+_s7)), _n7 === 1 || _t7 !== 0 && (_i7 === 0 || _i7 === 1) ? _default_daXK12_number(this.pointsPossible) + " point" : _default_daXK12_number(this.pointsPossible) + " point")) + " muligt";
      }

      return "Ukendt resultat";
    }
  }]);
  Info.displayName = "Info";
  return Info;
}(_react.Component), _class2.propTypes = {
  quizSession: _reactImmutableProptypes.default.record.isRequired,
  quizSessionResult: _reactImmutableProptypes.default.record.isRequired,
  sessionItemResults: _reactImmutableProptypes.default.list.isRequired
}, _temp)) || _class);
exports.default = Info;