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

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 _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));

var _classnames = _interopRequireDefault(require("classnames"));

var _immutable = require("immutable");

var _d3Scale = require("d3-scale");

var _IconX = _interopRequireDefault(require("@instructure/ui-icons/lib/Solid/IconX"));

var _IconCheck = _interopRequireDefault(require("@instructure/ui-icons/lib/Solid/IconCheck"));

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

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

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

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

var _extractTextFromHtml = _interopRequireDefault(require("quiz-interactions/lib/util/extractTextFromHtml"));

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'dcmrK',
  template: function template(theme) {
    return "\n\n@keyframes AnswerFrequencySummary__styles__contentAnimation {\n  to {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n.AnswerFrequencySummary__styles__content {\n  opacity: 0.01;\n  transform: translate3d(0, 0, 0);\n  animation-name: AnswerFrequencySummary__styles__contentAnimation;\n  animation-fill-mode: forwards;\n  animation-duration: 0.3s;\n}\n\n.AnswerFrequencySummary__styles__content th,\n  .AnswerFrequencySummary__styles__content td {\n    border-bottom-color: ".concat(theme.contentCellBorderColor || 'inherit', ";\n    padding-left: 0.35rem;\n    padding-right: 0.35rem;\n  }\n\n.AnswerFrequencySummary__styles__answerRow th,\n  .AnswerFrequencySummary__styles__answerRow td {\n    padding-top: ").concat(theme.answerRowCellPadding || 'inherit', ";\n    padding-bottom: ").concat(theme.answerRowCellPadding || 'inherit', ";\n    white-space: nowrap;\n  }\n\n.AnswerFrequencySummary__styles__answerRowCorrect {\n  background-color: ").concat(theme.answerRowCorrectBackgroundColor || 'inherit', ";\n}\n\n.AnswerFrequencySummary__styles__answerRowCorrect .AnswerFrequencySummary__styles__answerIcon {\n    color: ").concat(theme.answerRowAnswerIconColor || 'inherit', ";\n  }\n\n.AnswerFrequencySummary__styles__answerRowCorrect .AnswerFrequencySummary__styles__answerTextfield,\n  .AnswerFrequencySummary__styles__answerRowCorrect .AnswerFrequencySummary__styles__answerRatio {\n    font-weight: ").concat(theme.answerRowCorrectTextFieldFontWeight || 'inherit', ";\n  }\n\n.AnswerFrequencySummary__styles__answerRowCorrect .AnswerFrequencySummary__styles__bar {\n    background: ").concat(theme.answerRowCorrectBarBackgroundColor || 'inherit', ";\n  }\n\ntd.AnswerFrequencySummary__styles__answerIcon {\n  font-size: ").concat(theme.answerIconFontSize || 'inherit', ";\n  color: ").concat(theme.answerIconColor || 'inherit', ";\n  width: 1%;\n}\n\nth.AnswerFrequencySummary__styles__answerTextfield {\n  font-weight: ").concat(theme.answerTextfieldFontWeight || 'inherit', ";\n  overflow: hidden;\n  max-width: 12rem;\n}\n\n.AnswerFrequencySummary__styles__respondentLink {\n  text-align: right;\n  width: 1%;\n}\n\n[dir=\"ltr\"] .AnswerFrequencySummary__styles__respondentLink {\n  text-align: right;\n}\n\n[dir=\"rtl\"] .AnswerFrequencySummary__styles__respondentLink {\n  text-align: right;\n}\n\ntd.AnswerFrequencySummary__styles__respondentLink {\n  color: ").concat(theme.respondentLinkColor || 'inherit', ";\n}\n\ntd.AnswerFrequencySummary__styles__respondentLinkPresent {\n  color: ").concat(theme.respondentLinkPresentColor || 'inherit', ";\n}\n\n.AnswerFrequencySummary__styles__answerRatio {\n  text-align: right;\n  width: 1%;\n}\n\n[dir=\"ltr\"] .AnswerFrequencySummary__styles__answerRatio {\n  text-align: right;\n}\n\n[dir=\"rtl\"] .AnswerFrequencySummary__styles__answerRatio {\n  text-align: right;\n}\n\ntd.AnswerFrequencySummary__styles__answerRatio {\n  padding-left: ").concat(theme.answerRatioPaddingLeft || 'inherit', ";\n}\n\ntd.AnswerFrequencySummary__styles__answerDistributionCell {\n  border-bottom-color: transparent;\n  padding: 0;\n  width: 7rem;\n  min-width: 7rem;\n  height: 2.3rem;\n}\n\n.AnswerFrequencySummary__styles__bar {\n  background: ").concat(theme.barBackgroundColor || 'inherit', ";\n  transition: width 0.5s;\n  position: relative;\n  min-width: ").concat(theme.barMinWidth || 'inherit', ";\n  height: 100%;\n}\n\n@media screen and (--phoneBreakPoint) {\n  th.AnswerFrequencySummary__styles__answerTextfield {\n    max-width: 0;\n  }\n\n  th.AnswerFrequencySummary__styles__respondentLink {\n    max-width: 3rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n");
  },
  'content': 'AnswerFrequencySummary__styles__content',
  'contentAnimation': 'AnswerFrequencySummary__styles__contentAnimation',
  'answerRow': 'AnswerFrequencySummary__styles__answerRow',
  'answerRowCorrect': 'AnswerFrequencySummary__styles__answerRowCorrect',
  'answerIcon': 'AnswerFrequencySummary__styles__answerIcon',
  'answerTextfield': 'AnswerFrequencySummary__styles__answerTextfield',
  'answerRatio': 'AnswerFrequencySummary__styles__answerRatio',
  'bar': 'AnswerFrequencySummary__styles__bar',
  'respondentLink': 'AnswerFrequencySummary__styles__respondentLink',
  'respondentLinkPresent': 'AnswerFrequencySummary__styles__respondentLinkPresent',
  'answerDistributionCell': 'AnswerFrequencySummary__styles__answerDistributionCell'
};
var AnswerFrequencySummary = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(AnswerFrequencySummary, _Component);

  function AnswerFrequencySummary() {
    var _getPrototypeOf2;

    var _this;

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

    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)(AnswerFrequencySummary)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.renderAnswerTableRow = function (choiceInfo, choiceIndex) {
      var _classNames, _classNames2;

      var choiceSum = _this.props.itemAnalysis.choiceCountSum();

      var choiceBody = _this.renderChoiceBody(choiceInfo);

      var rowClassNames = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.answerRow, true), (0, _defineProperty2.default)(_classNames, styles.answerRowCorrect, _this.isCorrect(choiceInfo)), _classNames));
      var respondentClassNames = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, styles.respondentLink, true), (0, _defineProperty2.default)(_classNames2, styles.respondentLinkPresent, choiceInfo.get('choiceCount') > 0), _classNames2));
      return _react.default.createElement("tr", {
        key: choiceIndex,
        className: rowClassNames
      }, _react.default.createElement("td", {
        className: styles.answerIcon
      }, _this.isCorrect(choiceInfo) ? _react.default.createElement(_IconCheck.default, null) : _react.default.createElement(_IconX.default, null), _react.default.createElement(_ScreenReaderContent.default, null, _this.getBarTitle(choiceInfo))), _react.default.createElement("th", {
        scope: "row",
        className: styles.answerTextfield
      }, _react.default.createElement("span", {
        title: choiceBody
      }, choiceBody)), _react.default.createElement("td", {
        className: respondentClassNames
      }, _formatMessage.default.number(Math.floor(choiceInfo.get('choiceCount')))), _react.default.createElement("td", {
        className: styles.answerRatio
      }, choiceSum > 0 ? _formatMessage.default.number(choiceInfo.get('choiceCount') / choiceSum, 'percent') : 0), _react.default.createElement("td", {
        className: styles.answerDistributionCell,
        "aria-hidden": "true"
      }, _this.renderBarPlot(choiceInfo)));
    };

    return _this;
  }

  (0, _createClass2.default)(AnswerFrequencySummary, [{
    key: "getBarStyles",
    value: function getBarStyles(choiceInfo) {
      var highest = this.props.itemAnalysis.choiceCountMax();
      var xScale = (0, _d3Scale.scaleLinear)() // linear scale against domain, range
      .domain([highest, 0]) // bounds
      .range([100, 0]); // to percent of column width

      return {
        width: "".concat(xScale(choiceInfo.get('choiceCount')), "%")
      };
    }
  }, {
    key: "isCorrect",
    value: function isCorrect(choiceInfo) {
      return choiceInfo !== this.unansweredChoiceInfo && choiceInfo.get('correct');
    }
  }, {
    key: "getBarTitle",
    value: function getBarTitle(choiceInfo) {
      return this.isCorrect(choiceInfo) ? "Correct Answer" : "Incorrect Answer";
    }
  }, {
    key: "renderBarPlot",
    value: function renderBarPlot(choiceInfo) {
      return _react.default.createElement("div", {
        className: styles.bar,
        style: this.getBarStyles(choiceInfo),
        alt: "Graph bar",
        title: this.getBarTitle(choiceInfo)
      });
    }
  }, {
    key: "renderChoiceBody",
    value: function renderChoiceBody(choiceInfo) {
      var text = (0, _extractTextFromHtml.default)(choiceInfo.get('itemBody'));
      if (text.length > 0) return text;
      return this.getBarTitle(choiceInfo);
    }
  }, {
    key: "render",
    value: function render() {
      var choiceInfo = this.props.itemAnalysis.choiceInfo();
      this.unansweredChoiceInfo = (0, _immutable.fromJS)({
        itemBody: "(No answer)",
        choiceCount: this.props.itemAnalysis.unansweredInfo()
      });
      return _react.default.createElement("div", {
        className: styles.content
      }, _react.default.createElement(_Table.default, {
        caption: _react.default.createElement(_ScreenReaderContent.default, null, "Answer Frequency Summary")
      }, _react.default.createElement("thead", null, _react.default.createElement("tr", null, _react.default.createElement("th", null, _react.default.createElement(_ScreenReaderContent.default, null, "Is Correct?")), _react.default.createElement("th", null, "Answer"), _react.default.createElement("th", {
        className: styles.respondentLink
      }, "Respondents"), _react.default.createElement("th", {
        className: styles.answerRatio
      }, "%"))), _react.default.createElement("tbody", null, choiceInfo.toArray().map(this.renderAnswerTableRow), this.renderAnswerTableRow(this.unansweredChoiceInfo, choiceInfo.size))));
    }
  }]);
  AnswerFrequencySummary.displayName = "AnswerFrequencySummary";
  return AnswerFrequencySummary;
}(_react.Component), _class2.propTypes = {
  itemAnalysis: _reactImmutableProptypes.default.record.isRequired
}, _temp)) || _class);
exports.default = AnswerFrequencySummary;