'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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; /* eslint "import/no-extraneous-dependencies": "warn" */


// TODO change the d3 dependency in package.json to match specific modules


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactImmutableProptypes = require('react-immutable-proptypes');

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _immutable = require('immutable');

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

var _IconXSolid = require('instructure-icons/lib/Solid/IconXSolid');

var _IconXSolid2 = _interopRequireDefault(_IconXSolid);

var _IconCheckSolid = require('instructure-icons/lib/Solid/IconCheckSolid');

var _IconCheckSolid2 = _interopRequireDefault(_IconCheckSolid);

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

var _Table2 = _interopRequireDefault(_Table);

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

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

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

var _lib2 = _interopRequireDefault(_lib);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

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

var _extractTextFromHtml2 = _interopRequireDefault(_extractTextFromHtml);

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@keyframes _2Ci9cac1IVx20hHxdSZyum {\n  to {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n._159dV8zi7hQwj0AB5PSGrq {\n  opacity: 0.01;\n  transform: translate3d(0, 0, 0);\n  animation-name: _2Ci9cac1IVx20hHxdSZyum;\n  animation-fill-mode: forwards;\n  animation-duration: 0.3s;\n}\n\n._159dV8zi7hQwj0AB5PSGrq th,\n  ._159dV8zi7hQwj0AB5PSGrq td {\n    border-bottom-color: ' + theme.contentCellBorderColor + ';\n    padding-left: 0.35rem;\n    padding-right: 0.35rem;\n  }\n\n._2lO2-k4cQOCr3fgPWa8iuw th,\n  ._2lO2-k4cQOCr3fgPWa8iuw td {\n    padding-top: ' + theme.answerRowCellPadding + ';\n    padding-bottom: ' + theme.answerRowCellPadding + ';\n    white-space: nowrap;\n  }\n\n._3lp5QrMBloKZVmBYtQ5MMU {\n  background-color: ' + theme.answerRowCorrectBackgroundColor + ';\n}\n\n._3lp5QrMBloKZVmBYtQ5MMU ._1iqoxmOaBuATNTCGv9-j2P {\n    color: ' + theme.answerRowAnswerIconColor + ';\n  }\n\n._3lp5QrMBloKZVmBYtQ5MMU ._3phTIU1Q3WSfbpZ5XKBUxG,\n  ._3lp5QrMBloKZVmBYtQ5MMU ._2ZydLcFjBGJqUrFgqEgkFQ {\n    font-weight: ' + theme.answerRowCorrectTextFieldFontWeight + ';\n  }\n\n._3lp5QrMBloKZVmBYtQ5MMU ._2fo0iLjEmCelzYyNDWri4B {\n    background: ' + theme.answerRowCorrectBarBackgroundColor + ';\n  }\n\ntd._1iqoxmOaBuATNTCGv9-j2P {\n  font-size: ' + theme.answerIconFontSize + ';\n  color: ' + theme.answerIconColor + ';\n  width: 1%;\n}\n\nth._3phTIU1Q3WSfbpZ5XKBUxG {\n  font-weight: ' + theme.answerTextfieldFontWeight + ';\n  overflow: hidden;\n  max-width: 12rem;\n}\n\n._6-FGRWIOL6S8EynvV_9f0 {\n  text-align: right;\n  width: 1%;\n}\n\n[dir="ltr"] ._6-FGRWIOL6S8EynvV_9f0 {\n  text-align: right;\n}\n\n[dir="rtl"] ._6-FGRWIOL6S8EynvV_9f0 {\n  text-align: right;\n}\n\ntd._6-FGRWIOL6S8EynvV_9f0 {\n  color: ' + theme.respondentLinkColor + ';\n}\n\ntd._14U2ry1MYquIlx0w9t0nDl {\n  color: ' + theme.respondentLinkPresentColor + ';\n}\n\n._2ZydLcFjBGJqUrFgqEgkFQ {\n  text-align: right;\n  width: 1%;\n}\n\n[dir="ltr"] ._2ZydLcFjBGJqUrFgqEgkFQ {\n  text-align: right;\n}\n\n[dir="rtl"] ._2ZydLcFjBGJqUrFgqEgkFQ {\n  text-align: right;\n}\n\ntd._2ZydLcFjBGJqUrFgqEgkFQ {\n  padding-left: ' + theme.answerRatioPaddingLeft + ';\n}\n\ntd._18Z_2ePPxSsqzTDzaCVOzp {\n  border-bottom-color: transparent;\n  padding: 0;\n  width: 7rem;\n  min-width: 7rem;\n  height: 2.3rem;\n}\n\n._2fo0iLjEmCelzYyNDWri4B {\n  background: ' + theme.barBackgroundColor + ';\n  transition: width 0.5s;\n  position: relative;\n  min-width: ' + theme.barMinWidth + ';\n  height: 100%;\n}\n\n@media screen and (--phoneBreakPoint) {\n  th._3phTIU1Q3WSfbpZ5XKBUxG {\n    max-width: 0;\n  }\n\n  th._6-FGRWIOL6S8EynvV_9f0 {\n    max-width: 3rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n';
  },
  'content': '_159dV8zi7hQwj0AB5PSGrq',
  'contentAnimation': '_2Ci9cac1IVx20hHxdSZyum',
  'answerRow': '_2lO2-k4cQOCr3fgPWa8iuw',
  'answerRowCorrect': '_3lp5QrMBloKZVmBYtQ5MMU',
  'answerIcon': '_1iqoxmOaBuATNTCGv9-j2P',
  'answerTextfield': '_3phTIU1Q3WSfbpZ5XKBUxG',
  'answerRatio': '_2ZydLcFjBGJqUrFgqEgkFQ',
  'bar': '_2fo0iLjEmCelzYyNDWri4B',
  'respondentLink': '_6-FGRWIOL6S8EynvV_9f0',
  'respondentLinkPresent': '_14U2ry1MYquIlx0w9t0nDl',
  'answerDistributionCell': '_18Z_2ePPxSsqzTDzaCVOzp'
};

var _ref2 = _react2.default.createElement(_IconCheckSolid2.default, null);

var _ref3 = _react2.default.createElement(_IconXSolid2.default, null);

var AnswerFrequencySummary = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(AnswerFrequencySummary, _Component);

  function AnswerFrequencySummary() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = AnswerFrequencySummary.__proto__ || Object.getPrototypeOf(AnswerFrequencySummary)).call.apply(_ref, [this].concat(args))), _this), _this.renderAnswerTableRow = function (choiceInfo, choiceIndex) {
      var _classNames, _classNames2;

      var choiceSum = _this.props.itemAnalysis.choiceCountSum();
      var choiceBody = _this.renderChoiceBody(choiceInfo);
      var rowClassNames = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, styles.answerRow, true), (0, _defineProperty3.default)(_classNames, styles.answerRowCorrect, _this.isCorrect(choiceInfo)), _classNames));
      var respondentClassNames = (0, _classnames2.default)((_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, styles.respondentLink, true), (0, _defineProperty3.default)(_classNames2, styles.respondentLinkPresent, choiceInfo.get('choiceCount') > 0), _classNames2));

      return _react2.default.createElement(
        'tr',
        { key: choiceIndex, className: rowClassNames },
        _react2.default.createElement(
          'td',
          { className: styles.answerIcon },
          _this.isCorrect(choiceInfo) ? _ref2 : _ref3,
          _react2.default.createElement(
            _ScreenReaderContent2.default,
            null,
            _this.getBarTitle(choiceInfo)
          )
        ),
        _react2.default.createElement(
          'th',
          { scope: 'row', className: styles.answerTextfield },
          _react2.default.createElement(
            'span',
            { title: choiceBody },
            choiceBody
          )
        ),
        _react2.default.createElement(
          'td',
          { className: respondentClassNames },
          _formatMessage2.default.number(Math.floor(choiceInfo.get('choiceCount')))
        ),
        _react2.default.createElement(
          'td',
          { className: styles.answerRatio },
          choiceSum > 0 ? _formatMessage2.default.number(choiceInfo.get('choiceCount') / choiceSum, 'percent') : 0
        ),
        _react2.default.createElement(
          'td',
          { className: styles.answerDistributionCell, 'aria-hidden': 'true' },
          _this.renderBarPlot(choiceInfo)
        )
      );
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.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: 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, _formatMessage2.default)('Correct Answer') : (0, _formatMessage2.default)('Incorrect Answer');
    }
  }, {
    key: 'renderBarPlot',
    value: function renderBarPlot(choiceInfo) {
      return _react2.default.createElement('div', {
        className: styles.bar,
        style: this.getBarStyles(choiceInfo),
        alt: (0, _formatMessage2.default)('Graph bar'),
        title: this.getBarTitle(choiceInfo)
      });
    }
  }, {
    key: 'renderChoiceBody',
    value: function renderChoiceBody(choiceInfo) {
      var text = (0, _extractTextFromHtml2.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, _formatMessage2.default)('(No answer)'),
        choiceCount: this.props.itemAnalysis.unansweredInfo()
      });

      return _react2.default.createElement(
        'div',
        { className: styles.content },
        _react2.default.createElement(
          _Table2.default,
          {
            caption: _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              (0, _formatMessage2.default)('Answer Frequency Summary')
            )
          },
          _react2.default.createElement(
            'thead',
            null,
            _react2.default.createElement(
              'tr',
              null,
              _react2.default.createElement(
                'th',
                null,
                _react2.default.createElement(
                  _ScreenReaderContent2.default,
                  null,
                  (0, _formatMessage2.default)('Is Correct?')
                )
              ),
              _react2.default.createElement(
                'th',
                null,
                (0, _formatMessage2.default)('Answer')
              ),
              _react2.default.createElement(
                'th',
                { className: styles.respondentLink },
                (0, _formatMessage2.default)('Respondents')
              ),
              _react2.default.createElement(
                'th',
                { className: styles.answerRatio },
                (0, _formatMessage2.default)('%')
              )
            )
          ),
          _react2.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: _reactImmutableProptypes2.default.record.isRequired
}, _temp2)) || _class);
exports.default = AnswerFrequencySummary;