'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,
    _temp2,
    _default_enGB_number = Intl.NumberFormat('en-GB', { style: 'decimal' }).format;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

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

var _Alert2 = _interopRequireDefault(_Alert);

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

var _AccessibleContent2 = _interopRequireDefault(_AccessibleContent);

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('../../../../common/format-message');

var _formatMessage2 = _interopRequireDefault(_formatMessage);

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

var _FormattedDuration2 = _interopRequireDefault(_FormattedDuration);

var _formatTimespan = require('../../../../common/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 '/*  imported from styles.css  */\n\n.GradingHeader__styles__root {\n  padding: ' + theme.rootPadding + ';\n  border-bottom: ' + theme.rootBottomBorder + ';\n}\n\n.GradingHeader__styles__pointsAndPercentage {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-around;\n}\n\n.GradingHeader__styles__alertWrapper {\n  width: 100%;\n  margin: ' + theme.alertWrapperMargin + ' 0;\n}\n';
  },
  'root': 'GradingHeader__styles__root',
  'pointsAndPercentage': 'GradingHeader__styles__pointsAndPercentage',
  'alertWrapper': 'GradingHeader__styles__alertWrapper'
};
var GradingHeader = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(GradingHeader, _Component);

  function GradingHeader() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = GradingHeader.__proto__ || Object.getPrototypeOf(GradingHeader)).call.apply(_ref, [this].concat(args))), _this), _this.setRef = function (itemRef) {
      _this.itemRef = itemRef;
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(GradingHeader, [{
    key: 'percentage',
    value: function percentage() {
      return _formatMessage2.default.number(this.props.quizSessionResult.percentage, 'percent');
    }
  }, {
    key: 'points',
    value: function points() {
      return _formatMessage2.default.number(this.props.quizSessionResult.score);
    }
  }, {
    key: 'pointsPossible',
    value: function pointsPossible() {
      return this.props.quizSessionResult && this.props.quizSessionResult.pointsPossible;
    }
  }, {
    key: 'alertContent',
    value: function alertContent(positionsNeedingReview) {
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'div',
          null,
          ' ',
          'The following questions need review:',
          ' '
        ),
        positionsNeedingReview.toArray().map(function (position) {
          return _react2.default.createElement(
            'div',
            { key: position },
            ' - ',
            'Question ' + _default_enGB_number(position),
            ' '
          );
        })
      );
    }
  }, {
    key: 'renderUngradedInfo',
    value: function renderUngradedInfo() {
      var positionsNeedingReview = this.props.sessionItemResults.filter(function (s) {
        return s.get('score') === null;
      }).map(function (s) {
        return s.get('position');
      });

      if (positionsNeedingReview.size) {
        return _react2.default.createElement(
          'div',
          { className: styles.alertWrapper },
          _react2.default.createElement(
            _Alert2.default,
            { variant: 'info' },
            this.alertContent(positionsNeedingReview)
          )
        );
      }
    }
  }, {
    key: 'PrimaryContent',
    value: function PrimaryContent(_ref2) {
      var children = _ref2.children;

      return _react2.default.createElement(
        _Text2.default,
        { as: 'div', color: 'primary', size: 'xx-large', weight: 'bold' },
        children
      );
    }
  }, {
    key: 'SecondaryContent',
    value: function SecondaryContent(_ref3) {
      var children = _ref3.children;

      return _react2.default.createElement(
        _Text2.default,
        { color: 'secondary' },
        children
      );
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.itemRef && this.itemRef.focus();
    }
  }, {
    key: 'render',
    value: function render() {
      var _s, _n, _i, _v;

      var scoreText = 'Score';
      var pointsPossibleText = 'Out of ' + (_s = this.pointsPossible(), _n = +_s, (_i = Math.floor(Math.abs(+_s)), _v = (_s + '.').split('.')[1].length, _i === 1 && _v === 0 ? _default_enGB_number(this.pointsPossible()) + ' point' : _default_enGB_number(this.pointsPossible()) + ' points'));
      var attemptText = 'Time for this attempt';
      return _react2.default.createElement(
        'div',
        { className: styles.root },
        _react2.default.createElement(
          'h1',
          {
            ref: this.setRef,
            tabIndex: '-1' // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
          },
          'Results'
        ),
        _react2.default.createElement(
          'div',
          { className: styles.pointsAndPercentage },
          _react2.default.createElement(
            _AccessibleContent2.default,
            { alt: scoreText + ' ' + this.percentage() },
            _react2.default.createElement(
              this.PrimaryContent,
              null,
              this.percentage()
            ),
            _react2.default.createElement(
              this.SecondaryContent,
              null,
              scoreText
            )
          ),
          _react2.default.createElement(
            _AccessibleContent2.default,
            { alt: this.points() + ' ' + pointsPossibleText },
            _react2.default.createElement(
              this.PrimaryContent,
              null,
              this.points()
            ),
            _react2.default.createElement(
              this.SecondaryContent,
              null,
              pointsPossibleText
            )
          ),
          _react2.default.createElement(
            _AccessibleContent2.default,
            { alt: attemptText + ' ' + (0, _formatTimespan.formatTime)(this.props.quizSession.elapsedTime) },
            _react2.default.createElement(
              this.PrimaryContent,
              null,
              _react2.default.createElement(_FormattedDuration2.default, { timeLimitInSeconds: this.props.quizSession.elapsedTime })
            ),
            _react2.default.createElement(
              this.SecondaryContent,
              null,
              attemptText
            )
          )
        ),
        this.renderUngradedInfo()
      );
    }
  }]);
  GradingHeader.displayName = 'GradingHeader'
  ;
  return GradingHeader;
}(_react.Component), _class2.propTypes = {
  quizSession: _reactImmutableProptypes2.default.record.isRequired,
  quizSessionResult: _reactImmutableProptypes2.default.record.isRequired,
  sessionItemResults: _reactImmutableProptypes2.default.list.isRequired
}, _temp2)) || _class);
exports.default = GradingHeader;