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

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-common/lib/format-message"));

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

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

var styles = {
  componentId: 'eCUxk',
  template: function template(theme) {
    return "\n\n.ItemAnalysisRow__styles__itemAnalysisRow {\n  padding: ".concat(theme.itemAnalysisRowPadding || 'inherit', ";\n  margin-bottom: ").concat(theme.itemAnalysisRowMargin || 'inherit', ";\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: ").concat(theme.headerTextColor || 'inherit', ";\n  font-size: ").concat(theme.headerTextFontSize || 'inherit', ";\n}\n\n.ItemAnalysisRow__styles__metricsRow {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  padding-bottom: ").concat(theme.metricsRowLowerPadding || 'inherit', ";\n}\n\n.ItemAnalysisRow__styles__metricNote {\n  font-size: ").concat(theme.metricNoteFontSize || 'inherit', ";\n  color: ").concat(theme.metricNoteColor || 'inherit', ";\n}\n\n.ItemAnalysisRow__styles__stem {\n  flex: 1 0 35%;\n  font-size: ").concat(theme.stemFontSize || 'inherit', ";\n  line-height: ").concat(theme.stemLineHeight || 'inherit', ";\n  margin-bottom: ").concat(theme.stemMargin || 'inherit', ";\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: ").concat(theme.emptyTextPadding || 'inherit', ";\n  text-align: center;\n  color: ").concat(theme.emptyTextColor || 'inherit', ";\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  \n  flex: 10 1 45%;\n}\n\n.ItemAnalysisRow__styles__answerDistributionSection {\n  flex: 1 1 auto;\n\n  \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 ").concat(theme.answerDistributionPadding || 'inherit', ";\n  position: relative;\n}\n\n.ItemAnalysisRow__styles__answerDistributionChart {\n  width: 19rem;\n  padding: 0 ").concat(theme.answerDistributionChartPadding || 'inherit', ";\n}\n\n.ItemAnalysisRow__styles__answerDistributionLegend {\n  padding: 0 ").concat(theme.answerDistributionLegendPadding || 'inherit', ";\n}\n\n.ItemAnalysisRow__styles__answerDistributionSwatch {\n  background-color: ").concat(theme.answerDistributionSwatchColor || 'inherit', ";\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, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(ItemAnalysisRow, _Component);

  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" ? "Udvidet element " + _default_da_number(position) : "Skjult element " + _default_da_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" ? "Udvid element " + _default_da_number(position) + " detaljer" : "Skjul element " + _default_da_number(position) + " detaljer");
      return _react.default.createElement(_ExpandButton.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 _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, "Element " + _default_da_number(position)), interactionType, _react.default.createElement(_PresentationContent.default, null, " | "), _default_da_number(pointsPossible) + " mulige point")), 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 = (0, _react2.formatChildren)((this.props.itemAnalysis.meanScore() || 0) + "<0>/" + _default_da_number(this.props.itemAnalysis.pointsPossible) + " point</0>", [_react.default.createElement("span", {
        key: "mean",
        className: styles.metricNote
      })]);
      return _react.default.createElement(_MetricsList.default, null, _react.default.createElement(_MetricsListItem.default, {
        key: "difficultyIndex",
        label: "Sv\xE6rhedsindeks",
        value: this.props.itemAnalysis.difficultyIndex(),
        className: styles.metric
      }), _react.default.createElement(_MetricsListItem.default, {
        key: "discriminationIndex",
        label: "Diskriminationsindeks",
        value: this.props.itemAnalysis.discriminationIndex(),
        className: styles.metric
      }), _react.default.createElement(_MetricsListItem.default, {
        key: "rpb",
        label: "RPB",
        value: this.props.itemAnalysis.pointBiserial(),
        className: styles.metric
      }), _react.default.createElement(_MetricsListItem.default, {
        key: "meanEarnedScore",
        label: "Gennemsnitligt opn\xE5et resultat",
        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: "Svarfrekvensoversigt"
      }, _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
        }, _react.default.createElement(_Caption.default, {
          text: "Pr\xE6station pr. femtedel"
        }, _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: "Antal studerende"
          }]
        }))))));
      }
    }
  }, {
    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: "L\xE6ringsudbytte"
        }, _react.default.createElement(_OutcomeList.default, {
          artifactType: "quizzes.item",
          artifactId: itemAnalysis.itemId,
          alignmentSetId: itemAnalysis.outcomeAlignmentSetGuid,
          host: outcomesEndpoint,
          jwt: outcomesToken,
          emptyText: "Ingen l\xE6ringsudbytter er justeret"
        })));
      }
    }
  }, {
    key: "renderNotFound",
    value: function renderNotFound() {
      return _react.default.createElement("div", {
        className: styles.emptyText
      }, "Ingen afleveringer endnu");
    }
  }, {
    key: "render",
    value: function render() {
      if (!this.props.itemAnalysis.isLoaded()) {
        return _react.default.createElement(_Spinner.default, null);
      }

      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;
}(_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)
}, _class2.defaultProps = {
  animateDelay: void 0,
  animateDuration: void 0,
  expanded: false,
  outcomesEndpoint: null,
  outcomesToken: null,
  children: []
}, _temp)) || _class);
exports.default = ItemAnalysisRow;