"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 _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));

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

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

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

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

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

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

var _RichContentRenderer = _interopRequireDefault(require("@instructure/quiz-rce/lib/components/RichContentRenderer"));

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

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

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

var _AnswerFrequencySummary = _interopRequireDefault(require("../AnswerFrequencySummary"));

var _QuintileDistribution = _interopRequireDefault(require("../../charts/QuintileDistribution"));

var _Legend = _interopRequireDefault(require("../../charts/Legend"));

var _Caption = _interopRequireDefault(require("../../Caption"));

var _MetricsListItem = _interopRequireDefault(require("../../MetricsListItem"));

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));

var _withI18nSupport2 = _interopRequireDefault(require("@instructure/quiz-common/lib/with-i18n-support"));

var _theme = _interopRequireDefault(require("./theme"));

var _dec,
    _class,
    _class2,
    _temp,
    _default_fi_number = Intl.NumberFormat("fi", { style: "decimal" }).format;

var styles = {
  componentId: 'eCUxk',
  template: function template(theme) {
    return "\n\n.eCUxk_cQXk{margin-bottom:".concat(theme.itemAnalysisRowMargin || 'inherit', ";padding:").concat(theme.itemAnalysisRowPadding || 'inherit', ";position:relative}\n\n.eCUxk_dlpV{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between}\n\n.eCUxk_fAhB{color:").concat(theme.headerTextColor || 'inherit', ";font-size:").concat(theme.headerTextFontSize || 'inherit', "}\n\n.eCUxk_dzph{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;padding-bottom:").concat(theme.metricsRowLowerPadding || 'inherit', "}\n\n.eCUxk_dFNV{color:").concat(theme.metricNoteColor || 'inherit', ";font-size:").concat(theme.metricNoteFontSize || 'inherit', "}\n\n.eCUxk_cloC{flex:1 0 35%;font-size:").concat(theme.stemFontSize || 'inherit', ";line-height:").concat(theme.stemLineHeight || 'inherit', ";margin-bottom:").concat(theme.stemMargin || 'inherit', "}\n\n.eCUxk_cloC p{margin:0}\n\n.eCUxk_bQrf{flex:0 1 42rem}\n\n.eCUxk_eiMu{justify-content:center}\n\n.eCUxk_bwKH{color:").concat(theme.emptyTextColor || 'inherit', ";flex:0 1 42rem;padding:").concat(theme.emptyTextPadding || 'inherit', ";text-align:center}\n\n[dir=ltr] .eCUxk_bwKH,[dir=rtl] .eCUxk_bwKH{text-align:center}\n\n.eCUxk_sIdV{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:0 -1rem}\n\n.eCUxk_dvfr{flex:10 1 45%}\n\n.eCUxk_dYYR{flex:1 1 auto;min-width:1%}\n\n.eCUxk_eFpQ{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:0 ").concat(theme.answerDistributionPadding || 'inherit', ";position:relative}\n\n.eCUxk_dFwC{padding:0 ").concat(theme.answerDistributionChartPadding || 'inherit', ";width:19rem}\n\n.eCUxk_bqaR{padding:0 ").concat(theme.answerDistributionLegendPadding || 'inherit', "}\n\n.eCUxk_RMvh{background-color:").concat(theme.answerDistributionSwatchColor || 'inherit', "}\n\n.eCUxk_dMVr{display:flex;margin:0 -1rem}\n\n@media screen and (--phoneBreakPoint){.eCUxk_eFpQ{padding:0}.eCUxk_eiMu{flex-basis:50%}}");
  },
  'itemAnalysisRow': 'eCUxk_cQXk',
  'headerRow': 'eCUxk_dlpV',
  'headerText': 'eCUxk_fAhB',
  'metricsRow': 'eCUxk_dzph',
  'metricNote': 'eCUxk_dFNV',
  'stem': 'eCUxk_cloC',
  'metrics': 'eCUxk_bQrf',
  'metric': 'eCUxk_eiMu',
  'emptyText': 'eCUxk_bwKH',
  'answerAnalysis': 'eCUxk_sIdV',
  'answerTableSection': 'eCUxk_dvfr',
  'answerDistributionSection': 'eCUxk_dYYR',
  'answerDistribution': 'eCUxk_eFpQ',
  'answerDistributionChart': 'eCUxk_dFwC',
  'answerDistributionLegend': 'eCUxk_bqaR',
  'answerDistributionSwatch': 'eCUxk_RMvh',
  'outcomeAlignments': 'eCUxk_dMVr'
};

var _ref2 =
/*#__PURE__*/
_react.default.createElement(_Spinner.default, null);

var ItemAnalysisRow = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_withI18nSupport) {
  (0, _inherits2.default)(ItemAnalysisRow, _withI18nSupport);

  function ItemAnalysisRow() {
    var _getPrototypeOf2;

    var _this;

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

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(ItemAnalysisRow)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _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" ? "Laajennettu kohde " + _default_fi_number(position) : "Kutistettu kohde " + _default_fi_number(position));

      _this.props.screenreaderNotification(text);
    };

    return _this;
  }

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

      var _this$props2 = this.props,
          position = _this$props2.position,
          expanded = _this$props2.expanded;
      var title = (_s2 = expanded, _s2 === "false" ? "Laajenna kohteen " + _default_fi_number(position) + " tietoja" : "Kutista kohteen" + _default_fi_number(position) + " tietoja");
      return _react.default.createElement(_ExpandButton.default, {
        onClick: this.toggleExpanded,
        title: title,
        isExpanded: expanded,
        "data-automation": "sdk-reporting-expand-button"
      });
    }
  }, {
    key: "renderHeader",
    value: function renderHeader() {
      var position = this.props.position;
      var interactionType = this.props.itemAnalysis.interactionTypeName();
      var pointsPossible = this.props.itemAnalysis.pointsPossible;
      var separator = ' | ';
      return _react.default.createElement("div", {
        className: styles.headerRow
      }, _react.default.createElement("div", {
        className: styles.headerText
      }, _react.default.createElement(_Heading.default, {
        level: "reset",
        as: "h3"
      }, _react.default.createElement(_ScreenReaderContent.default, null, "Kohde " + _default_fi_number(position)), interactionType, _react.default.createElement(_PresentationContent.default, null, separator), _default_fi_number(pointsPossible) + " pistett\xE4 mahdollista")), this.props.itemAnalysis.isPresent() && this.renderExpandButton());
    }
  }, {
    key: "renderStem",
    value: function renderStem() {
      return _react.default.createElement(_RichContentRenderer.default, {
        customStyles: styles.stem,
        content: this.props.itemAnalysis.itemBody
      });
    }
  }, {
    key: "defaultMetricsList",
    value: function defaultMetricsList() {
      var mean = [this.props.itemAnalysis.meanScore(this.locale) || 0, function (_ref) {
        var children = _ref.children;
        return _react.default.createElement("span", {
          key: "mean",
          className: styles.metricNote
        }, children);
      }({
        children: ["/", _default_fi_number(this.props.itemAnalysis.pointsPossible), " pistett\xE4"]
      })];
      return _react.default.createElement(_MetricsList.default, null, _react.default.createElement(_MetricsListItem.default, {
        key: "difficultyIndex",
        label: "Vaikeusindeksi",
        value: this.props.itemAnalysis.difficultyIndex(this.locale),
        className: styles.metric
      }), _react.default.createElement(_MetricsListItem.default, {
        key: "discriminationIndex",
        label: "Diskriminointi-indeksi",
        value: this.props.itemAnalysis.discriminationIndex(this.locale),
        className: styles.metric
      }), _react.default.createElement(_MetricsListItem.default, {
        key: "rpb",
        label: "RPB",
        value: this.props.itemAnalysis.pointBiserial(this.locale),
        className: styles.metric
      }), _react.default.createElement(_MetricsListItem.default, {
        key: "meanEarnedScore",
        label: "Keskim\xE4\xE4rin ansaittu pistem\xE4\xE4r\xE4",
        value: mean,
        className: styles.metric
      }));
    }
  }, {
    key: "renderMetrics",
    value: function renderMetrics() {
      var list = _react.default.Children.count(this.props.children) === 0 ? this.defaultMetricsList() : _react.default.createElement(_MetricsList.default, null, this.props.children);
      return _react.default.createElement("div", {
        className: styles.metrics
      }, list);
    }
  }, {
    key: "renderAnswerAnalysisChart",
    value: function renderAnswerAnalysisChart() {
      if (this.props.itemAnalysis.choiceInfo().size === 0) {
        return;
      }

      return _react.default.createElement("div", {
        className: styles.answerTableSection
      }, _react.default.createElement(_Caption.default, {
        text: "Vastauksien tiheyden yhteenveto"
      }, _react.default.createElement(_AnswerFrequencySummary.default, {
        itemAnalysis: this.props.itemAnalysis
      })));
    }
  }, {
    key: "renderAnswerAnalysis",
    value: function renderAnswerAnalysis() {
      if (this.props.expanded) {
        var quintile = this.props.itemAnalysis.quintile();
        return _react.default.createElement("div", {
          className: styles.answerAnalysis
        }, this.renderAnswerAnalysisChart(), _react.default.createElement("div", {
          className: styles.answerDistributionSection,
          "data-automation": "sdk-reporting-answer-distribution"
        }, _react.default.createElement(_Caption.default, {
          text: "Suorituskyky Quintilen perusteella"
        }, _react.default.createElement("div", {
          className: styles.answerDistribution
        }, _react.default.createElement("div", {
          className: styles.answerDistributionChart
        }, _react.default.createElement(_QuintileDistribution.default, {
          visualDistribution: quintile,
          animateDelay: this.props.animateDelay,
          animateDuration: this.props.animateDuration
        })), _react.default.createElement("div", {
          className: styles.answerDistributionLegend
        }, _react.default.createElement(_Legend.default, {
          series: [{
            className: styles.answerDistributionSwatch,
            label: "Opiskelijoiden m\xE4\xE4r\xE4"
          }]
        }))))));
      }
    }
  }, {
    key: "renderOutcomeAlignments",
    value: function renderOutcomeAlignments() {
      var _this$props3 = this.props,
          expanded = _this$props3.expanded,
          itemAnalysis = _this$props3.itemAnalysis,
          outcomesEndpoint = _this$props3.outcomesEndpoint,
          outcomesToken = _this$props3.outcomesToken;

      if (expanded && outcomesEndpoint && itemAnalysis.outcomeAlignmentSetGuid) {
        return _react.default.createElement("div", {
          className: styles.outcomeAlignments
        }, _react.default.createElement(_Caption.default, {
          text: "Tulokset"
        }, _react.default.createElement(_OutcomeList.default, {
          artifactType: "quizzes.item",
          artifactId: itemAnalysis.itemId,
          alignmentSetId: itemAnalysis.outcomeAlignmentSetGuid,
          host: outcomesEndpoint,
          jwt: outcomesToken,
          emptyText: "Tuloksia ei ole linjattu"
        })));
      }
    }
  }, {
    key: "renderNotFound",
    value: function renderNotFound() {
      return _react.default.createElement("div", {
        className: styles.emptyText
      }, "L\xE4hetyksi\xE4 ei viel\xE4");
    }
  }, {
    key: "render",
    value: function render() {
      if (!this.props.itemAnalysis.isLoaded()) {
        return _ref2;
      }

      var present = this.props.itemAnalysis.isPresent();
      return _react.default.createElement(_Card.default, {
        key: this.props.itemId,
        className: styles.itemAnalysisRow
      }, this.renderHeader(), _react.default.createElement("div", {
        className: styles.metricsRow
      }, this.renderStem(), present ? this.renderMetrics() : this.renderNotFound()), present && this.renderAnswerAnalysis(), this.renderOutcomeAlignments());
    }
  }]);
  ItemAnalysisRow.displayName = "ItemAnalysisRow";
  return ItemAnalysisRow;
}((0, _withI18nSupport2.default)(_react.Component)), _class2.propTypes = {
  animateDelay: _propTypes.default.number,
  animateDuration: _propTypes.default.number,
  expanded: _propTypes.default.bool,
  itemAnalysis: _reactImmutableProptypes.default.record.isRequired,
  itemId: _propTypes.default.string.isRequired,
  position: _propTypes.default.number.isRequired,
  toggleExpanded: _propTypes.default.func.isRequired,
  outcomesEndpoint: _propTypes.default.string,
  outcomesToken: _propTypes.default.string,
  screenreaderNotification: _propTypes.default.func.isRequired,
  children: _propTypes.default.arrayOf(_propTypes.default.node),
  locale: _propTypes.default.string
}, _class2.defaultProps = {
  animateDelay: void 0,
  animateDuration: void 0,
  expanded: false,
  outcomesEndpoint: null,
  outcomesToken: null,
  children: [],
  locale: null
}, _class2.contextTypes = {
  locale: _propTypes.default.string
}, _temp)) || _class);
exports.default = ItemAnalysisRow;