'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,
    _default_fr_number = Intl.NumberFormat('fr', { style: 'decimal' }).format;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactImmutableProptypes = require('react-immutable-proptypes');

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _AccessibleContent2 = _interopRequireDefault(_AccessibleContent);

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

var _Alert2 = _interopRequireDefault(_Alert);

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

var _Heading2 = _interopRequireDefault(_Heading);

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

var _Progress2 = _interopRequireDefault(_Progress);

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

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

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

var _Text2 = _interopRequireDefault(_Text);

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

var _lib2 = _interopRequireDefault(_lib);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _FormattedDuration = require('../../../shared/FormattedDuration');

var _FormattedDuration2 = _interopRequireDefault(_FormattedDuration);

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

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 '/*\n     imported from styles.css \n  */\n\n.Info__styles__alertWrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  margin-top: ' + theme.alertWrapperMargin + ';\n}\n\n.Info__styles__alertWidth {\n  width: 300px;\n}\n\n.Info__styles__wrapper {\n  padding: none;\n  margin: none;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n}\n\n.Info__styles__info {\n  align-self: center;\n\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n}\n\n.Info__styles__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.Info__styles__score {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n\n  margin: ' + theme.scoreMargin + ';\n  height: 150px;\n  width: 150px;\n\n  /*\n    progress modal sets a -1 z-index on its content\n    and this raises it above the app background\n  */\n  z-index: ' + theme.scoreZIndex + ';\n}\n\n.Info__styles__scorePercentage {\n  font-size: ' + theme.scorePercentageFontSize + ';\n  font-weight: ' + theme.scorePercentageFontWeight + ';\n}\n\n.Info__styles__infoWrapper {\n  flex: 1 1 auto;\n  margin: ' + theme.infoWrapperMargin + ';\n  padding-left: ' + theme.inforWrapperPadding + ';\n}\n';
  },
  'alertWrapper': 'Info__styles__alertWrapper',
  'alertWidth': 'Info__styles__alertWidth',
  'wrapper': 'Info__styles__wrapper',
  'info': 'Info__styles__info',
  'scoreStats': 'Info__styles__scoreStats',
  'score': 'Info__styles__score',
  'scorePercentage': 'Info__styles__scorePercentage',
  'infoWrapper': 'Info__styles__infoWrapper'
};


var unknownPercentageValue = 'UNKNOWN_PERCENTAGE';

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

  function Info(props) {
    (0, _classCallCheck3.default)(this, Info);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Info.__proto__ || Object.getPrototypeOf(Info)).call(this, props));

    _this.progressTextFormatter = _this.progressTextFormatter.bind(_this);
    _this.progressDisplayFormatter = _this.progressDisplayFormatter.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Info, [{
    key: 'progressTextFormatter',


    // needed for inst-ui Progress
    value: function progressTextFormatter(valueNow, valueMax) {
      var percentageUnknown = valueNow === unknownPercentageValue;
      return percentageUnknown ? 'Score inconnu' : 'Votre score \xE9tait ' + _formatMessage2.default.number(valueNow, 'percent') + '.';
    }

    // needed for inst-ui Progress

  }, {
    key: 'progressDisplayFormatter',
    value: function progressDisplayFormatter(valueNow, valueMax) {
      var valueToShow = valueNow === unknownPercentageValue ? '?' : _formatMessage2.default.number(valueNow, 'percent');

      return _react2.default.createElement(
        'div',
        {
          className: styles.scorePercentage,
          'data-automation': 'sdk-quiz-score-percentage'
        },
        valueToShow
      );
    }
  }, {
    key: 'renderAlert',
    value: function renderAlert() {
      var _props = this.props,
          quizSessionResult = _props.quizSessionResult,
          sessionItemResults = _props.sessionItemResults;

      var ungradedCount = sessionItemResults.reduce(function (count, sessionItemResult) {
        return sessionItemResult.get('score') === null ? count + 1 : count;
      }, 0);
      var hasUngradedQuesitons = ungradedCount > 0;

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

        var ungradedText = (_s = ungradedCount, _n = +_s, (_i = Math.floor(Math.abs(+_s)), _i === 0 || _i === 1 ? _default_fr_number(ungradedCount) + ' question doit \xEAtre not\xE9e' : _default_fr_number(ungradedCount) + ' questions doivent \xEAtre not\xE9es'));

        return _react2.default.createElement(
          'div',
          { className: styles.alertWrapper },
          _react2.default.createElement(
            'div',
            { className: styles.alertWidth },
            _react2.default.createElement(
              _Alert2.default,
              { variant: 'info' },
              ungradedText
            )
          )
        );
      }
    }
  }, {
    key: 'renderScoreStats',
    value: function renderScoreStats() {
      return _react2.default.createElement(
        'div',
        { className: styles.scoreStats },
        this.renderProgress(),
        this.renderPointsDisplay()
      );
    }
  }, {
    key: 'renderProgress',
    value: function renderProgress() {
      if (this.pointsMissing || this.pointsPossibleMissing) {
        return null;
      }

      return _react2.default.createElement(
        'div',
        { className: styles.score },
        _react2.default.createElement(_Progress2.default, {
          animateOnMount: true,
          size: 'large',
          variant: 'circle',
          label: 'Votre score',
          formatValueText: this.progressTextFormatter,
          formatDisplayedValue: this.progressDisplayFormatter,
          valueNow: this.percentageVal,
          valueMax: 1
        })
      );
    }
  }, {
    key: 'renderPointsDisplay',
    value: function renderPointsDisplay() {
      return _react2.default.createElement(
        'div',
        { className: styles.infoWrapper },
        _react2.default.createElement(
          _AccessibleContent2.default,
          { alt: this.mainPointsText + ' ' + this.subPointsText },
          _react2.default.createElement(
            _Text2.default,
            { as: 'div', color: 'primary', size: 'xx-large', weight: 'bold' },
            this.mainPointsText
          ),
          _react2.default.createElement(
            _Text2.default,
            { color: 'secondary' },
            this.subPointsText
          )
        )
      );
    }
  }, {
    key: 'renderTime',
    value: function renderTime() {
      var elapsedTimeText = (0, _formatTimespan.formatTime)(this.props.quizSession.elapsedTime);
      var attemptText = 'Temps pour cette tentative';

      return _react2.default.createElement(
        _AccessibleContent2.default,
        { alt: attemptText + ' ' + elapsedTimeText },
        _react2.default.createElement(
          _Text2.default,
          { as: 'div', color: 'primary', size: 'xx-large', weight: 'bold' },
          _react2.default.createElement(_FormattedDuration2.default, { timeLimitInSeconds: this.props.quizSession.elapsedTime })
        ),
        _react2.default.createElement(
          _Text2.default,
          { color: 'secondary' },
          attemptText
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        null,
        this.renderAlert(),
        _react2.default.createElement(
          'div',
          { className: styles.wrapper },
          _react2.default.createElement(
            'div',
            { className: styles.info },
            _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              _react2.default.createElement(
                _Heading2.default,
                { level: 'h2' },
                'Statistiques d\'\xE9valuation'
              )
            ),
            this.renderScoreStats(),
            _react2.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 _formatMessage2.default.number(valueToUse);
    }
  }, {
    key: 'subPointsText',
    get: function get() {
      var _s4, _n4, _i4;

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

        return 'Sur ' + (_s2 = this.pointsPossible, _n2 = +_s2, (_i2 = Math.floor(Math.abs(+_s2)), _i2 === 0 || _i2 === 1 ? _default_fr_number(this.pointsPossible) + ' point' : _default_fr_number(this.pointsPossible) + ' points'));
      }

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

        return (_s3 = this.points, _n3 = +_s3, (_i3 = Math.floor(Math.abs(+_s3)), _i3 === 0 || _i3 === 1 ? 'point' : 'points')) + ' gagn\xE9(s)';
      }

      // We use "Points Possible" when only points is present or when nothing is present
      return (_s4 = this.pointsPossible, _n4 = +_s4, (_i4 = Math.floor(Math.abs(+_s4)), _i4 === 0 || _i4 === 1 ? 'Point' : 'Points')) + ' possible';
    }
  }]);
  Info.displayName = 'Info'
  ;
  return Info;
}(_react.Component), _class2.propTypes = {
  quizSession: _reactImmutableProptypes2.default.recordOf({
    elapsedTime: _propTypes2.default.number
  }).isRequired,
  quizSessionResult: _reactImmutableProptypes2.default.recordOf({
    score: _propTypes2.default.number,
    pointsPossible: _propTypes2.default.number,
    percentage: _propTypes2.default.number
  }).isRequired,
  sessionItemResults: _reactImmutableProptypes2.default.list.isRequired
}, _temp)) || _class);
exports.default = Info;