"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_nb_number = Intl.NumberFormat("nb", { style: "decimal" }).format;

var styles = {
  componentId: 'dZbOF',
  template: function template(theme) {
    return "\n\n.dZbOF_ekHz{align-items:center;display:flex;flex-direction:row;justify-content:center;margin-top:".concat(theme.alertWrapperMargin || 'inherit', "}\n\n.dZbOF_bANW{width:300px}\n\n.dZbOF_gasz{margin:none;padding:none}\n\n.dZbOF_pypk,.dZbOF_gasz{align-items:center;display:flex;justify-content:center}\n\n.dZbOF_pypk{align-self:center;flex-wrap:wrap}\n\n.dZbOF_bCqi{flex-wrap:wrap;justify-content:flex-start}\n\n.dZbOF_frHB,.dZbOF_bCqi{align-items:center;display:flex;flex:1 1 auto}\n\n.dZbOF_frHB{height:150px;margin:").concat(theme.scoreMargin || 'inherit', ";width:150px;z-index:").concat(theme.scoreZIndex || 'inherit', "}\n\n.dZbOF_fkZg{font-size:").concat(theme.scorePercentageFontSize || 'inherit', ";font-weight:").concat(theme.scorePercentageFontWeight || 'inherit', "}\n\n.dZbOF_vsBM{flex:1 1 auto;margin:").concat(theme.infoWrapperMargin || 'inherit', ";padding-left:").concat(theme.inforWrapperPadding || 'inherit', "}");
  },
  'alertWrapper': 'dZbOF_ekHz',
  'alertWidth': 'dZbOF_bANW',
  'wrapper': 'dZbOF_gasz',
  'info': 'dZbOF_pypk',
  'scoreStats': 'dZbOF_bCqi',
  'score': 'dZbOF_frHB',
  'scorePercentage': 'dZbOF_fkZg',
  'infoWrapper': 'dZbOF_vsBM'
};
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 ? "Ukjent resultat" : "Poengsummen ble " + _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;

        var ungradedText = (_s = ungradedCount, _n = +_s, (_n === 1 ? _default_nb_number(ungradedCount) + " sp\xF8rsm\xE5l trenger karaktersetting" : _default_nb_number(ungradedCount) + " sp\xF8rsm\xE5l trenger karaktersetting"));
        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: "Ditt 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: "".concat(this.mainPointsText, " ").concat(this.subPointsText)
      }, _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 elapsedTimeText = (0, _formatTimespan.formatTime)(this.props.quizSession.elapsedTime);
      var attemptText = "Tid for dette fors\xF8ket";
      return _react.default.createElement(_AccessibleContent.default, {
        alt: "".concat(attemptText, " ").concat(elapsedTimeText)
      }, _react.default.createElement(_Text.default, {
        as: "div",
        color: "primary",
        size: "xx-large",
        weight: "bold"
      }, _react.default.createElement(_FormattedDuration.default, {
        timeLimitInSeconds: 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"
      }, "Vurderingsstatistikk")), 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;

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

        return "Tom for " + (_s2 = this.pointsPossible, _n2 = +_s2, (_n2 === 1 ? _default_nb_number(this.pointsPossible) + " poeng" : _default_nb_number(this.pointsPossible) + " poeng"));
      }

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

        return "Opptjent " + (_s3 = this.points, _n3 = +_s3, (_n3 === 1 ? "poeng" : "poeng"));
      } // We use "Points Possible" when only points is present or when nothing is present


      return (_s4 = this.pointsPossible, _n4 = +_s4, (_n4 === 1 ? "Poeng" : "Poeng")) + " mulig";
    }
  }]);
  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;