'use strict';

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

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 _get2 = require('babel-runtime/helpers/get');

var _get3 = _interopRequireDefault(_get2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _dec,
    _class,
    _class2,
    _temp2,
    _default_fr_number = Intl.NumberFormat('fr', { style: 'decimal' }).format; /* eslint "no-mixed-operators": "warn" */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _lib2 = _interopRequireDefault(_lib);

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

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

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

var _Table2 = _interopRequireDefault(_Table);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _Distribution2 = require('../Distribution');

var _Distribution3 = _interopRequireDefault(_Distribution2);

var _theme = require('../Distribution/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.Distribution__styles__bar {\n  fill: ' + theme.barFillColor + ';\n}\n\n.Distribution__styles__barContainer {\n}\n\n.Distribution__styles__xAxis {\n}\n\n.Distribution__styles__barLabel {\n  font-family: ' + theme.barLabelFontFamily + ';\n  font-size: ' + theme.barLabelFontSize + ';\n  text-anchor: middle;\n}\n';
  },
  'bar': 'Distribution__styles__bar',
  'barContainer': 'Distribution__styles__barContainer',
  'xAxis': 'Distribution__styles__xAxis',
  'barLabel': 'Distribution__styles__barLabel'
};
var QuintileDistribution = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Distribution) {
  (0, _inherits3.default)(QuintileDistribution, _Distribution);

  function QuintileDistribution() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = QuintileDistribution.__proto__ || Object.getPrototypeOf(QuintileDistribution)).call.apply(_ref, [this].concat(args))), _this), _this.calculateLabelForIndex = function (d) {
      var numBars = _this.props.visualDistribution.length;
      var lower = Math.round(d * 100 / numBars + (d > 0 ? 1 : 0));
      var upper = Math.round((d + 1) * 100 / numBars);
      return _default_fr_number(lower) + '-' + _default_fr_number(upper) + '%';
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(QuintileDistribution, [{
    key: 'calculateAxis',
    value: function calculateAxis(props) {
      (0, _get3.default)(QuintileDistribution.prototype.__proto__ || Object.getPrototypeOf(QuintileDistribution.prototype), 'calculateAxis', this).call(this, props);

      this.xAxis = this.xAxis.tickFormat(this.calculateLabelForIndex);
    }
  }, {
    key: 'updateChart',
    value: function updateChart(svg, props) {
      (0, _get3.default)(QuintileDistribution.prototype.__proto__ || Object.getPrototypeOf(QuintileDistribution.prototype), 'updateChart', this).call(this, svg, props);

      this.renderNumbers(this.barContainer, props);
    }
  }, {
    key: 'renderNumbers',
    value: function renderNumbers(node, props) {
      this.chartData = props.visualDistribution;
      var height = this.height;
      var x = this.x;
      var y = this.y;

      var numbers = node.selectAll('text').data(this.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;
      });
      this.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 (props.animateDelay || 0) * (1 + i / props.visualDistribution.length);
        });
      });

      numbers.exit().remove();
    }
  }, {
    key: 'renderTable',
    value: function renderTable() {
      return _react2.default.createElement(
        _ScreenReaderContent2.default,
        null,
        _react2.default.createElement(
          _Table2.default,
          { caption: 'Score percentiles chart data' },
          _react2.default.createElement(
            'thead',
            null,
            _react2.default.createElement(
              'tr',
              null,
              _react2.default.createElement(
                'th',
                { scope: 'col' },
                'Score Percentile Range'
              ),
              _react2.default.createElement(
                'th',
                { scope: 'col' },
                'Count'
              )
            )
          ),
          _react2.default.createElement(
            'tbody',
            null,
            this.renderTableRows()
          )
        )
      );
    }
  }, {
    key: 'renderTableRows',
    value: function renderTableRows() {
      var _this2 = this;

      var chartData = this.props.visualDistribution;

      return chartData.map(function (count, index) {
        return _react2.default.createElement(
          'tr',
          { key: index + ':' + count },
          _react2.default.createElement(
            'td',
            null,
            _this2.calculateLabelForIndex(index)
          ),
          _react2.default.createElement(
            'td',
            null,
            count
          )
        );
      });
    }
  }, {
    key: 'render',
    value: function render() {
      return (0, _get3.default)(QuintileDistribution.prototype.__proto__ || Object.getPrototypeOf(QuintileDistribution.prototype), 'render', this).call(this);
    }
  }]);
  QuintileDistribution.displayName = 'QuintileDistribution'
  ;
  return QuintileDistribution;
}(_Distribution3.default), _class2.defaultProps = Object.assign({}, _Distribution3.default.defaultProps, {
  barPaddingInner: 0.375,
  barPaddingOuter: 0.1875,
  barPaddingTop: 24
}), _temp2)) || _class);
exports.default = QuintileDistribution;