"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 _d3Array = require("d3-array");

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 _Distribution = _interopRequireDefault(require("../Distribution"));

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

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

var _dec,
    _class,
    _class2,
    _temp,
    _default_ht_number = Intl.NumberFormat("ht", { style: "decimal" }).format,
    _percent_ht_number = Intl.NumberFormat("ht", { style: "percent" }).format;

var distributionStyles = {
  componentId: 'bIUJn',
  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 styles = {
  componentId: 'owVFv',
  template: function template(theme) {
    return "\n\n.owVFv_eAvm{display:flex;flex-direction:row;justify-content:center;overflow:hidden}\n\n.owVFv_eAvm>div{flex:0 1 51rem}\n\n.owVFv_eAvm svg{overflow:visible}\n\n@media screen and (--phoneBreakPoint){.owVFv_eAvm .owVFv_cKHw{font-size:".concat(theme.phoneBarLabelFontSize || 'inherit', "}.owVFv_eAvm .owVFv_eIKC g:nth-child(odd){display:none}}");
  },
  'centileRoot': 'owVFv_eAvm',
  'barLabel': 'owVFv_cKHw',
  'xAxis': 'owVFv_eIKC'
};

var starBin = function starBin(props) {
  if (typeof props.starScore !== 'number') return;
  var starScore = Math.max(0, Math.min(props.starScore, 1)); // min+floor here matches quiz_etl HistogramHelper

  return Math.min(Math.floor(starScore * props.visualDistribution.length), props.visualDistribution.length - 1);
};

var CentileDistribution = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(CentileDistribution, _Component);

  function CentileDistribution() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this._calculateAxis = function (x, y, xAxis, height) {
      x.domain((0, _d3Array.range)(101));

      if (typeof _this.props.starScore === 'number') {
        var starIndex = starBin(_this.props); // Determine if star above bar will overflow height, and reduce range to
        // account for 18 star height + 12 star bottom padding

        var starTop = y(_this.props.visualDistribution[starIndex]) - 30;
        y.rangeRound([height, _this.props.barPaddingTop - Math.min(0, starTop)]);
      }

      xAxis.tickValues((0, _d3Array.range)(0, 101, 10)).tickFormat(function (d) {
        return _default_ht_number(d) + "%";
      });
    };

    _this._createChart = function (svg, width) {
      // Manually redraw x axis to extend beyond container
      var axisPadding = 2000;
      svg.select("g.".concat(distributionStyles.xAxis, " path")).attr('d', "M".concat(-1 * axisPadding, ",0H").concat(width + axisPadding));
      return svg;
    };

    _this._summarizeChart = function (summary) {
      if (typeof _this.props.starScore !== 'number') return summary;
      return "Ou f\xE8 " + _percent_ht_number(_this.props.starScore) + ". " + summary;
    };

    _this._renderTable = function () {
      return _react.default.createElement(_ScreenReaderContent.default, null, _react.default.createElement(_Table.default, {
        caption: "Tablo done pousantaj notasyon"
      }, _react.default.createElement("thead", null, _react.default.createElement("tr", null, _react.default.createElement("th", {
        scope: "col"
      }, "Pousantaj Notasyon"), _react.default.createElement("th", {
        scope: "col"
      }, "Konte"))), _react.default.createElement("tbody", null, _this._renderTableRows())));
    };

    return _this;
  }

  (0, _createClass2.default)(CentileDistribution, [{
    key: "_renderTableRows",
    value: function _renderTableRows() {
      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, index + "%"), _react.default.createElement("td", null, count));
      });
    }
  }, {
    key: "render",
    value: function render() {
      var props = Object.assign({}, this.props, {
        calculateAxis: this._calculateAxis,
        createChart: this._createChart,
        renderTable: this._renderTable,
        summarizeChart: this._summarizeChart,
        starIndex: starBin(this.props)
      });
      return _react.default.createElement("div", {
        className: styles.centileRoot
      }, _react.default.createElement(_Distribution.default, props));
    }
  }]);
  CentileDistribution.displayName = "CentileDistribution";
  return CentileDistribution;
}(_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,
  starScore: _propTypes.PropTypes.number
}, _class2.defaultProps = {
  animateDelay: 200,
  animateDuration: 900,
  barPaddingInner: 0.25,
  // Spacing between bars, so each is visible, could be accomplished by borders
  barPaddingOuter: 0,
  // Spacing between bars, so each is visible, could be accomplished by borders
  barPaddingTop: 0,
  // Spacing between highest bar and top of chart, pixels
  chartHeight: 200,
  // Height in pixels
  chartWidth: 900,
  visualDistribution: [],
  starScore: null
}, _temp)) || _class);
exports.default = CentileDistribution;