"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-i18n/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 dcmrK_dFUU{to{opacity:1;transform:translateZ(0)}}\n\n.dcmrK_caGd{animation-duration:0.3s;animation-fill-mode:forwards;animation-name:dcmrK_dFUU;opacity:0.01;transform:translateZ(0)}\n\n.dcmrK_caGd td,.dcmrK_caGd th{border-bottom-color:".concat(theme.contentCellBorderColor || 'inherit', ";padding-left:0.35rem;padding-right:0.35rem}\n\n.dcmrK_ddmB td,.dcmrK_ddmB th{padding-bottom:").concat(theme.answerRowCellPadding || 'inherit', ";padding-top:").concat(theme.answerRowCellPadding || 'inherit', ";white-space:nowrap}\n\n.dcmrK_dOeq{background-color:").concat(theme.answerRowCorrectBackgroundColor || 'inherit', "}\n\n.dcmrK_dOeq .dcmrK_cLIq{color:").concat(theme.answerRowAnswerIconColor || 'inherit', "}\n\n.dcmrK_dOeq .dcmrK_ccwL,.dcmrK_dOeq .dcmrK_bFWU{font-weight:").concat(theme.answerRowCorrectTextFieldFontWeight || 'inherit', "}\n\n.dcmrK_dOeq .dcmrK_fKwc{background:").concat(theme.answerRowCorrectBarBackgroundColor || 'inherit', "}\n\ntd.dcmrK_cLIq{color:").concat(theme.answerIconColor || 'inherit', ";font-size:").concat(theme.answerIconFontSize || 'inherit', ";width:1%}\n\nth.dcmrK_bFWU{font-weight:").concat(theme.answerTextfieldFontWeight || 'inherit', ";max-width:12rem;overflow:hidden}\n\n.dcmrK_fTiR{text-align:right;width:1%}\n\n[dir=ltr] .dcmrK_fTiR,[dir=rtl] .dcmrK_fTiR{text-align:right}\n\ntd.dcmrK_fTiR{color:").concat(theme.respondentLinkColor || 'inherit', "}\n\ntd.dcmrK_lHsH{color:").concat(theme.respondentLinkPresentColor || 'inherit', "}\n\n.dcmrK_ccwL{text-align:right;width:1%}\n\n[dir=ltr] .dcmrK_ccwL,[dir=rtl] .dcmrK_ccwL{text-align:right}\n\ntd.dcmrK_ccwL{padding-left:").concat(theme.answerRatioPaddingLeft || 'inherit', "}\n\ntd.dcmrK_dEZf{border-bottom-color:transparent;height:2.3rem;min-width:7rem;padding:0;width:7rem}\n\n.dcmrK_fKwc{background:").concat(theme.barBackgroundColor || 'inherit', ";height:100%;min-width:").concat(theme.barMinWidth || 'inherit', ";position:relative;transition:width 0.5s}\n\n@media screen and (--phoneBreakPoint){th.dcmrK_bFWU{max-width:0}th.dcmrK_fTiR{max-width:3rem;overflow:hidden;text-overflow:ellipsis}}");
  },
  'content': 'dcmrK_caGd',
  'contentAnimation': 'dcmrK_dFUU',
  'answerRow': 'dcmrK_ddmB',
  'answerRowCorrect': 'dcmrK_dOeq',
  'answerIcon': 'dcmrK_cLIq',
  'answerRatio': 'dcmrK_ccwL',
  'answerTextfield': 'dcmrK_bFWU',
  'bar': 'dcmrK_fKwc',
  'respondentLink': 'dcmrK_fTiR',
  'respondentLinkPresent': 'dcmrK_lHsH',
  'answerDistributionCell': 'dcmrK_dEZf'
};

var _ref =
/*#__PURE__*/
_react.default.createElement(_IconCheck.default, null);

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

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) ? _ref : _ref2, _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) ? (0, _formatMessage.default)('Correct Answer') : (0, _formatMessage.default)('Incorrect Answer');
    }
  }, {
    key: "renderBarPlot",
    value: function renderBarPlot(choiceInfo) {
      return _react.default.createElement("div", {
        className: styles.bar,
        style: this.getBarStyles(choiceInfo),
        alt: (0, _formatMessage.default)('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: (0, _formatMessage.default)('(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, (0, _formatMessage.default)('Answer Frequency Summary'))
      }, _react.default.createElement("thead", null, _react.default.createElement("tr", null, _react.default.createElement("th", null, _react.default.createElement(_ScreenReaderContent.default, null, (0, _formatMessage.default)('Is Correct?'))), _react.default.createElement("th", null, (0, _formatMessage.default)('Answer')), _react.default.createElement("th", {
        className: styles.respondentLink
      }, (0, _formatMessage.default)('Respondents')), _react.default.createElement("th", {
        className: styles.answerRatio
      }, (0, _formatMessage.default)('%')))), _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;