'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;

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 _Text = require('@instructure/ui-elements/lib/components/Text');

var _Text2 = _interopRequireDefault(_Text);

var _MetricsList = require('@instructure/ui-elements/lib/components/MetricsList');

var _MetricsList2 = _interopRequireDefault(_MetricsList);

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

var _Heading2 = _interopRequireDefault(_Heading);

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

var _lib2 = _interopRequireDefault(_lib);

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

var _FormattedDuration2 = _interopRequireDefault(_FormattedDuration);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _Card = require('../../../common/components/shared/Card');

var _Card2 = _interopRequireDefault(_Card);

var _Spinner = require('../../../common/components/shared/spinner/Spinner');

var _Spinner2 = _interopRequireDefault(_Spinner);

var _CentileDistribution = require('../charts/CentileDistribution');

var _CentileDistribution2 = _interopRequireDefault(_CentileDistribution);

var _MetricsListItem = require('../MetricsListItem');

var _MetricsListItem2 = _interopRequireDefault(_MetricsListItem);

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.quizAnalysis__styles__root {\n  padding: ' + theme.rootPadding + ';\n}\n\n.quizAnalysis__styles__wrapper {\n  margin-top: ' + theme.wrapperMargin + ';\n}\n\n@media screen and (--tabletBreakPoint) {\n\n.quizAnalysis__styles__metric {\n    flex-basis: 33.3%\n}\n  }\n\n@media screen and (--phoneBreakPoint) {\n\n.quizAnalysis__styles__metric {\n    flex-basis: 50%\n}\n  }\n';
  },
  'root': 'quizAnalysis__styles__root',
  'wrapper': 'quizAnalysis__styles__wrapper',
  'metric': 'quizAnalysis__styles__metric'
};
var QuizAnalysisOverview = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(QuizAnalysisOverview, _Component);

  function QuizAnalysisOverview() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = QuizAnalysisOverview.__proto__ || Object.getPrototypeOf(QuizAnalysisOverview)).call.apply(_ref, [this].concat(args))), _this), _this.renderBatchTimestamp = function () {
      if (_this.props.quizAnalysis.batchTimestamp) {
        var timestamp = Date.parse(_this.props.quizAnalysis.batchTimestamp);
        return _react2.default.createElement(
          _Text2.default,
          { color: 'secondary', size: 'x-small' },
          _react2.default.createElement('br', null),
          _react2.default.createElement(
            'b',
            null,
            '\xDAltima atualiza\xE7\xE3o de dados:'
          ),
          '\xA0',
          _formatMessage2.default.date(timestamp, 'medium')
        );
      }
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(QuizAnalysisOverview, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          quizAnalysis = _props.quizAnalysis,
          quizTitle = _props.quizTitle;


      if (!quizAnalysis.isLoaded()) return _react2.default.createElement(_Spinner2.default, null);

      var formattedElapsedTime = _react2.default.createElement(_FormattedDuration2.default, { timeLimitInSeconds: quizAnalysis.meanElapsedTime() });

      return _react2.default.createElement(
        _Card2.default,
        { className: styles.root },
        _react2.default.createElement(
          _Heading2.default,
          { level: 'h4', as: 'h2', className: styles.quizTitle },
          quizTitle
        ),
        _react2.default.createElement(
          'div',
          { className: styles.wrapper },
          _react2.default.createElement(
            _MetricsList2.default,
            null,
            _react2.default.createElement(_MetricsListItem2.default, {
              label: 'Pontua\xE7\xE3o mais alta',
              value: quizAnalysis.highScore(),
              className: styles.metric
            }),
            _react2.default.createElement(_MetricsListItem2.default, {
              label: 'Pontua\xE7\xE3o baixa',
              value: quizAnalysis.lowScore(),
              className: styles.metric
            }),
            _react2.default.createElement(_MetricsListItem2.default, {
              label: 'Resultado m\xE9dio',
              value: quizAnalysis.meanScore(),
              className: styles.metric
            }),
            _react2.default.createElement(_MetricsListItem2.default, {
              label: 'Desvio padr\xE3o',
              value: quizAnalysis.standardDeviation(),
              className: styles.metric
            }),
            _react2.default.createElement(_MetricsListItem2.default, {
              label: 'Tempo m\xE9dio transcorrido',
              value: formattedElapsedTime,
              className: styles.metric
            }),
            _react2.default.createElement(_MetricsListItem2.default, {
              label: 'Alfa de Cronbach',
              value: quizAnalysis.cronbachsAlpha(),
              className: styles.metric
            })
          )
        ),
        _react2.default.createElement(
          'div',
          { className: styles.wrapper },
          _react2.default.createElement(_CentileDistribution2.default, {
            summaryDistribution: quizAnalysis.decileDistribution(),
            visualDistribution: quizAnalysis.centileDistribution()
          })
        ),
        this.renderBatchTimestamp()
      );
    }
  }]);
  QuizAnalysisOverview.displayName = 'QuizAnalysisOverview'
  ;
  return QuizAnalysisOverview;
}(_react.Component), _class2.propTypes = {
  quizAnalysis: _reactImmutableProptypes2.default.record.isRequired,
  quizTitle: _propTypes2.default.string.isRequired
}, _class2.defaultProps = {
  quizTitle: ''
}, _temp2)) || _class);
exports.default = QuizAnalysisOverview;