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

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 _react3 = require('format-message/react');

var _OutcomeList = require('outcomes-react/lib/containers/OutcomeList');

var _OutcomeList2 = _interopRequireDefault(_OutcomeList);

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

var _Heading2 = _interopRequireDefault(_Heading);

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

var _MetricsList2 = _interopRequireDefault(_MetricsList);

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

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

var _PresentationContent = require('@instructure/ui-a11y/lib/components/PresentationContent');

var _PresentationContent2 = _interopRequireDefault(_PresentationContent);

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

var _lib2 = _interopRequireDefault(_lib);

var _RichContentRenderer = require('quiz-interactions/lib/components/common/components/rce/RichContentRenderer');

var _RichContentRenderer2 = _interopRequireDefault(_RichContentRenderer);

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

var _Card2 = _interopRequireDefault(_Card);

var _ExpandButton = require('../../../../common/components/shared/ExpandButton');

var _ExpandButton2 = _interopRequireDefault(_ExpandButton);

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

var _Spinner2 = _interopRequireDefault(_Spinner);

var _AnswerFrequencySummary = require('../AnswerFrequencySummary');

var _AnswerFrequencySummary2 = _interopRequireDefault(_AnswerFrequencySummary);

var _QuintileDistribution = require('../../charts/QuintileDistribution');

var _QuintileDistribution2 = _interopRequireDefault(_QuintileDistribution);

var _Legend = require('../../charts/Legend');

var _Legend2 = _interopRequireDefault(_Legend);

var _Caption = require('../../Caption');

var _Caption2 = _interopRequireDefault(_Caption);

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

var _MetricsListItem2 = _interopRequireDefault(_MetricsListItem);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

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.ItemAnalysisRow__styles__itemAnalysisRow {\n  padding: ' + theme.itemAnalysisRowPadding + ';\n  margin-bottom: ' + theme.itemAnalysisRowMargin + ';\n  position: relative;\n}\n\n.ItemAnalysisRow__styles__headerRow {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.ItemAnalysisRow__styles__headerText {\n  color: ' + theme.headerTextColor + ';\n  font-size: ' + theme.headerTextFontSize + ';\n}\n\n.ItemAnalysisRow__styles__metricsRow {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.ItemAnalysisRow__styles__metricNote {\n  font-size: ' + theme.metricNoteFontSize + ';\n  color: ' + theme.metricNoteColor + ';\n}\n\n.ItemAnalysisRow__styles__stem {\n  flex: 1 0 35%;\n  font-size: ' + theme.stemFontSize + ';\n  line-height: ' + theme.stemLineHeight + ';\n  margin-bottom: ' + theme.stemMargin + ';\n}\n\n.ItemAnalysisRow__styles__stem p {\n    margin: 0;\n  }\n\n.ItemAnalysisRow__styles__metrics {\n  flex: 0 1 42rem;\n}\n\n.ItemAnalysisRow__styles__metric {\n  justify-content: center;\n}\n\n.ItemAnalysisRow__styles__emptyText {\n  flex: 0 1 42rem;\n  padding: ' + theme.emptyTextPadding + ';\n  text-align: center;\n  color: ' + theme.emptyTextColor + ';\n}\n\n[dir="ltr"] .ItemAnalysisRow__styles__emptyText {\n  text-align: center;\n}\n\n[dir="rtl"] .ItemAnalysisRow__styles__emptyText {\n  text-align: center;\n}\n\n.ItemAnalysisRow__styles__answerAnalysis {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  margin: 0 -1rem;\n}\n\n.ItemAnalysisRow__styles__answerTableSection {\n  /* Explicit flex-basis is a workaround for https://bugs.webkit.org/show_bug.cgi?id=136041 */\n  flex: 10 1 45%;\n}\n\n.ItemAnalysisRow__styles__answerDistributionSection {\n  flex: 1 1 auto;\n\n  /* Non-zero width for IE11 flex-wrap */\n  min-width: 1%;\n}\n\n.ItemAnalysisRow__styles__answerDistribution {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  padding: 0 ' + theme.answerDistributionPadding + ';\n  position: relative;\n}\n\n.ItemAnalysisRow__styles__answerDistributionChart {\n  width: 19rem;\n  padding: 0 ' + theme.answerDistributionChartPadding + ';\n}\n\n.ItemAnalysisRow__styles__answerDistributionLegend {\n  padding: 0 ' + theme.answerDistributionLegendPadding + ';\n}\n\n.ItemAnalysisRow__styles__answerDistributionSwatch {\n  background-color: ' + theme.answerDistributionSwatchColor + ';\n}\n\n.ItemAnalysisRow__styles__outcomeAlignments {\n  display: flex;\n  margin: 0 -1rem;\n}\n\n@media screen and (--phoneBreakPoint) {\n  .ItemAnalysisRow__styles__answerDistribution {\n    padding: 0;\n  }\n\n  .ItemAnalysisRow__styles__metric {\n    flex-basis: 50%;\n  }\n}\n';
  },
  'itemAnalysisRow': 'ItemAnalysisRow__styles__itemAnalysisRow',
  'headerRow': 'ItemAnalysisRow__styles__headerRow',
  'headerText': 'ItemAnalysisRow__styles__headerText',
  'metricsRow': 'ItemAnalysisRow__styles__metricsRow',
  'metricNote': 'ItemAnalysisRow__styles__metricNote',
  'stem': 'ItemAnalysisRow__styles__stem',
  'metrics': 'ItemAnalysisRow__styles__metrics',
  'metric': 'ItemAnalysisRow__styles__metric',
  'emptyText': 'ItemAnalysisRow__styles__emptyText',
  'answerAnalysis': 'ItemAnalysisRow__styles__answerAnalysis',
  'answerTableSection': 'ItemAnalysisRow__styles__answerTableSection',
  'answerDistributionSection': 'ItemAnalysisRow__styles__answerDistributionSection',
  'answerDistribution': 'ItemAnalysisRow__styles__answerDistribution',
  'answerDistributionChart': 'ItemAnalysisRow__styles__answerDistributionChart',
  'answerDistributionLegend': 'ItemAnalysisRow__styles__answerDistributionLegend',
  'answerDistributionSwatch': 'ItemAnalysisRow__styles__answerDistributionSwatch',
  'outcomeAlignments': 'ItemAnalysisRow__styles__outcomeAlignments'
};
var ItemAnalysisRow = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(ItemAnalysisRow, _Component);

  function ItemAnalysisRow() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = ItemAnalysisRow.__proto__ || Object.getPrototypeOf(ItemAnalysisRow)).call.apply(_ref, [this].concat(args))), _this), _this.toggleExpanded = function () {
      var _s;

      _this.props.toggleExpanded(_this.props.itemId);
      var _this$props = _this.props,
          position = _this$props.position,
          expanded = _this$props.expanded;

      var text = (_s = expanded, _s === 'false' ? 'Se expandi\xF3 el elemento ' + _default_es_number(position) : 'Se colaps\xF3 el elemento ' + _default_es_number(position));
      _this.props.screenreaderNotification(text);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(ItemAnalysisRow, [{
    key: 'renderExpandButton',
    value: function renderExpandButton() {
      var _s2;

      var _props = this.props,
          position = _props.position,
          expanded = _props.expanded;

      var title = (_s2 = expanded, _s2 === 'false' ? 'Expandir los detalles del elemento ' + _default_es_number(position) + ' ' : 'Contraer los detalles del elemento ' + _default_es_number(position));

      return _react2.default.createElement(_ExpandButton2.default, {
        onClick: this.toggleExpanded,
        title: title,
        isExpanded: expanded
      });
    }
  }, {
    key: 'renderHeader',
    value: function renderHeader() {
      var position = this.props.position;
      var interactionType = this.props.itemAnalysis.interactionTypeName();
      var pointsPossible = this.props.itemAnalysis.pointsPossible;

      return _react2.default.createElement(
        'div',
        { className: styles.headerRow },
        _react2.default.createElement(
          'div',
          { className: styles.headerText },
          _react2.default.createElement(
            _Heading2.default,
            { level: 'reset', as: 'h3' },
            _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              'Elemento ' + _default_es_number(position)
            ),
            interactionType,
            _react2.default.createElement(
              _PresentationContent2.default,
              null,
              ' | '
            ),
            _default_es_number(pointsPossible) + ' puntos posibles'
          )
        ),
        this.props.itemAnalysis.isPresent() && this.renderExpandButton()
      );
    }
  }, {
    key: 'renderStem',
    value: function renderStem() {
      return _react2.default.createElement(_RichContentRenderer2.default, {
        customStyles: styles.stem,
        content: this.props.itemAnalysis.itemBody
      });
    }
  }, {
    key: 'renderMetrics',
    value: function renderMetrics() {
      var mean = (0, _react3.formatChildren)((this.props.itemAnalysis.meanScore() || 0) + '<0>/' + _default_es_number(this.props.itemAnalysis.pointsPossible) + ' ptos.</0>', [_react2.default.createElement('span', { key: 'mean', className: styles.metricNote })]);

      return _react2.default.createElement(
        'div',
        { className: styles.metrics },
        _react2.default.createElement(
          _MetricsList2.default,
          null,
          _react2.default.createElement(_MetricsListItem2.default, {
            label: '\xCDndice de dificultad',
            value: this.props.itemAnalysis.difficultyIndex(),
            className: styles.metric
          }),
          _react2.default.createElement(_MetricsListItem2.default, {
            label: '\xCDndice de discriminaci\xF3n',
            value: this.props.itemAnalysis.discriminationIndex(),
            className: styles.metric
          }),
          _react2.default.createElement(_MetricsListItem2.default, {
            label: 'RPB',
            value: this.props.itemAnalysis.pointBiserial(),
            className: styles.metric
          }),
          _react2.default.createElement(_MetricsListItem2.default, {
            label: 'Puntaje obtenido promedio',
            value: mean,
            className: styles.metric
          })
        )
      );
    }
  }, {
    key: 'renderAnswerAnalysisChart',
    value: function renderAnswerAnalysisChart() {
      if (this.props.itemAnalysis.choiceInfo().size === 0) {
        return;
      }

      return _react2.default.createElement(
        'div',
        { className: styles.answerTableSection },
        _react2.default.createElement(
          _Caption2.default,
          { text: 'Resumen de frecuencia de respuesta' },
          _react2.default.createElement(_AnswerFrequencySummary2.default, { itemAnalysis: this.props.itemAnalysis })
        )
      );
    }
  }, {
    key: 'renderAnswerAnalysis',
    value: function renderAnswerAnalysis() {
      if (this.props.expanded) {
        var quintile = this.props.itemAnalysis.quintile();

        return _react2.default.createElement(
          'div',
          { className: styles.answerAnalysis },
          this.renderAnswerAnalysisChart(),
          _react2.default.createElement(
            'div',
            { className: styles.answerDistributionSection },
            _react2.default.createElement(
              _Caption2.default,
              { text: 'Rendimiento por quintiles' },
              _react2.default.createElement(
                'div',
                { className: styles.answerDistribution },
                _react2.default.createElement(
                  'div',
                  { className: styles.answerDistributionChart },
                  _react2.default.createElement(_QuintileDistribution2.default, { visualDistribution: quintile })
                ),
                _react2.default.createElement(
                  'div',
                  { className: styles.answerDistributionLegend },
                  _react2.default.createElement(_Legend2.default, { series: [{ className: styles.answerDistributionSwatch, label: 'N\xFAmero de alumnos' }] })
                )
              )
            )
          )
        );
      }
    }
  }, {
    key: 'renderOutcomeAlignments',
    value: function renderOutcomeAlignments() {
      var _props2 = this.props,
          expanded = _props2.expanded,
          itemAnalysis = _props2.itemAnalysis,
          outcomesEndpoint = _props2.outcomesEndpoint,
          outcomesToken = _props2.outcomesToken;


      if (expanded && outcomesEndpoint && itemAnalysis.outcomeAlignmentSetGuid) {
        return _react2.default.createElement(
          'div',
          { className: styles.outcomeAlignments },
          _react2.default.createElement(
            _Caption2.default,
            { text: 'Resultados' },
            _react2.default.createElement(_OutcomeList2.default, {
              artifactType: 'quizzes.item',
              artifactId: itemAnalysis.itemId,
              alignmentSetId: itemAnalysis.outcomeAlignmentSetGuid,
              host: outcomesEndpoint,
              jwt: outcomesToken,
              emptyText: 'Ning\xFAn logro alineado'
            })
          )
        );
      }
    }
  }, {
    key: 'renderNotFound',
    value: function renderNotFound() {
      return _react2.default.createElement(
        'div',
        { className: styles.emptyText },
        'No hay presentaciones a\xFAn'
      );
    }
  }, {
    key: 'render',
    value: function render() {
      if (!this.props.itemAnalysis.isLoaded()) {
        return _react2.default.createElement(_Spinner2.default, null);
      }

      var present = this.props.itemAnalysis.isPresent();

      return _react2.default.createElement(
        _Card2.default,
        { key: this.props.itemId, className: styles.itemAnalysisRow },
        this.renderHeader(),
        _react2.default.createElement(
          'div',
          { className: styles.metricsRow },
          this.renderStem(),
          present ? this.renderMetrics() : this.renderNotFound()
        ),
        present && this.renderAnswerAnalysis(),
        this.renderOutcomeAlignments()
      );
    }
  }]);
  ItemAnalysisRow.displayName = 'ItemAnalysisRow'
  ;
  return ItemAnalysisRow;
}(_react.Component), _class2.propTypes = {
  expanded: _propTypes2.default.bool,
  itemAnalysis: _reactImmutableProptypes2.default.record.isRequired,
  itemId: _propTypes2.default.string.isRequired,
  position: _propTypes2.default.number.isRequired,
  toggleExpanded: _propTypes2.default.func.isRequired,
  outcomesEndpoint: _propTypes2.default.string,
  outcomesToken: _propTypes2.default.string,
  screenreaderNotification: _propTypes2.default.func.isRequired
}, _class2.defaultProps = {
  expanded: false,
  outcomesEndpoint: null,
  outcomesToken: null
}, _temp2)) || _class);
exports.default = ItemAnalysisRow;