"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 = require("prop-types");

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

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

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

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

var _Distribution = _interopRequireDefault(require("../Distribution"));

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

var _dec,
    _class,
    _class2,
    _temp,
    _default_enIE_number = Intl.NumberFormat("en-IE", { style: "decimal" }).format;

var styles = {
  componentId: 'fGOwX',
  template: function template(theme) {
    return "\n\n.bIUJn_fKwc{fill:".concat(theme.barFillColor || 'inherit', "}\n\n.bIUJn_erik{fill:").concat(theme.barStarFillColor || 'inherit', "}\n\n.bIUJn_eIKC{color:").concat(theme.xAxisColor || 'inherit', "}\n\n.bIUJn_cKHw{color:").concat(theme.barLabelColor || 'inherit', ";font-family:").concat(theme.barLabelFontFamily || 'inherit', ";font-size:").concat(theme.barLabelFontSize || 'inherit', ";text-anchor:middle}");
  },
  'bar': 'bIUJn_fKwc',
  'barStar': 'bIUJn_erik',
  'xAxis': 'bIUJn_eIKC',
  'barLabel': 'bIUJn_cKHw'
};
var QuintileDistribution = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(QuintileDistribution, _Component);

  function QuintileDistribution() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this._calculateAxis = function (_, _2, xAxis) {
      xAxis.tickFormat(_this.calculateLabelForIndex);
    };

    _this.calculateLabelForIndex = function (d) {
      var numBars = _this.props.visualDistribution.length;
      var lower = Math.floor(d * 100 / numBars);
      var upper = Math.floor((d + 1) * 100 / numBars - (d < numBars - 1 ? 1 : 0));
      return _default_enIE_number(lower) + "-" + _default_enIE_number(upper) + "%";
    };

    _this._renderNumbers = function (svg, x, y, applyTransition, barContainer, height) {
      var chartData = _this.props.visualDistribution;
      var numbers = barContainer.selectAll('text').data(chartData);
      var texts = numbers.enter().insert('text', 'rect').classed(styles.barLabel, true).text(function (d) {
        return d;
      }).attr('x', function (d, i) {
        return x(i) + x.bandwidth() / 2;
      });
      applyTransition(texts, function (texts) {
        return texts.attr('y', height + 12);
      }, function (texts) {
        return texts.attr('y', function (d) {
          return y(d) - 6;
        });
      }, function (transition) {
        return transition.delay(function (d, i) {
          return (_this.props.animateDelay || 0) * (1 + i / _this.props.visualDistribution.length);
        });
      });
      numbers.exit().remove();
    };

    _this._renderTable = function () {
      return _react.default.createElement(_ScreenReaderContent.default, null, _react.default.createElement(_Table.default, {
        caption: "Score percentiles chart data"
      }, _react.default.createElement("thead", null, _react.default.createElement("tr", null, _react.default.createElement("th", {
        scope: "col"
      }, "Score Percentile Range"), _react.default.createElement("th", {
        scope: "col"
      }, "Count"))), _react.default.createElement("tbody", null, _this.renderTableRows())));
    };

    return _this;
  }

  (0, _createClass2.default)(QuintileDistribution, [{
    key: "renderTableRows",
    value: function renderTableRows() {
      var _this2 = this;

      var chartData = this.props.visualDistribution;
      return chartData.map(function (count, index) {
        return _react.default.createElement("tr", {
          key: "".concat(index, ":").concat(count)
        }, _react.default.createElement("td", null, _this2.calculateLabelForIndex(index)), _react.default.createElement("td", null, count));
      });
    }
  }, {
    key: "render",
    value: function render() {
      var props = Object.assign({}, this.props, {
        calculateAxis: this._calculateAxis,
        renderTable: this._renderTable,
        updateChart: this._renderNumbers
      });
      return _react.default.createElement(_Distribution.default, props);
    }
  }]);
  QuintileDistribution.displayName = "QuintileDistribution";
  return QuintileDistribution;
}(_react.Component), _class2.propTypes = {
  animateDelay: _propTypes.PropTypes.number,
  animateDuration: _propTypes.PropTypes.number,
  barPaddingInner: _propTypes.PropTypes.number,
  // Spacing between bars, so each is visible, could be accomplished by borders
  barPaddingOuter: _propTypes.PropTypes.number,
  // Spacing between bars, so each is visible, could be accomplished by borders
  barPaddingTop: _propTypes.PropTypes.number,
  chartHeight: _propTypes.PropTypes.number.isRequired,
  // Height in pixels
  chartWidth: _propTypes.PropTypes.number,

  /* *
   * * a fallback minimal distribution for tab-able, keyboard navigable buckets
   * * typically this will be ~ 10 buckets
   * */
  summaryDistribution: _propTypes.PropTypes.arrayOf(_propTypes.PropTypes.node),

  /* *
   * * A list of score values for each bucket.  Size of this array determines the number of buckets
   * */
  visualDistribution: _propTypes.PropTypes.arrayOf(_propTypes.PropTypes.node).isRequired
}, _class2.defaultProps = {
  animateDelay: 200,
  animateDuration: 900,
  barPaddingInner: 0.375,
  barPaddingOuter: 0.1875,
  barPaddingTop: 24,
  chartHeight: 200,
  // Height in pixels
  chartWidth: void 0,
  visualDistribution: []
}, _temp)) || _class);
exports.default = QuintileDistribution;