"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.DonutChart = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _lodash = _interopRequireDefault(require("lodash"));

var d3 = _interopRequireWildcard(require("d3"));

var _classnames = _interopRequireDefault(require("classnames"));

var COLORS = {
  Green: '#5FB95C',
  Red: '#F95B5C',
  Black: '#2F2F2F',
  MediumGrey: '#C8CCD1',
  LightGrey: '#E2E6E9',
  White: '#FFFFFF',
  Orange: '#FF8800'
};
var VALUES = {
  BASIC_RADIUS_RATE: 2.4,
  ENTITY_WIDTH_RATE: 0.14,
  NO_CALL_OFFSET_RATE: 0.49,
  WARNING_TEXT_OFFSET_RATE: 0.37
};

var DonutChart =
/*#__PURE__*/
function (_React$Component) {
  (0, _inheritsLoose2.default)(DonutChart, _React$Component);

  function DonutChart(props, context) {
    var _this;

    _this = _React$Component.call(this, props, context) || this;

    var radius = _this.calculateRadius();

    var entityOuterRadius = radius * (1 + VALUES.ENTITY_WIDTH_RATE / 2);
    var entityInnerRadius = radius * (1 - VALUES.ENTITY_WIDTH_RATE / 2);
    _this.state = {
      entityArc: d3.arc().outerRadius(entityOuterRadius).innerRadius(entityInnerRadius).cornerRadius(15).startAngle(0)
    };
    return _this;
  }

  var _proto = DonutChart.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.drawProgressBarLine();
  };

  _proto.componentDidUpdate = function componentDidUpdate() {
    this.drawProgressBarLine();
  };

  _proto.drawProgressBarLine = function drawProgressBarLine() {
    var _this$props = this.props,
        animation = _this$props.animation,
        percent = _this$props.percent;
    var entityPath = this.refs.entityPath;
    var endAngle = this.calculateEndAngle(percent);
    var entityColor = this.getEntityColor();
    var entityArc = this.state.entityArc;

    if (animation) {
      d3.select(entityPath).attr('fill', entityColor).datum({
        endAngle: endAngle
      }).attr('d', entityArc);
    } else {
      d3.select(entityPath).attr('fill', entityColor).attr('d', entityArc({
        endAngle: endAngle
      }));
    }
  };

  _proto.calculateRadius = function calculateRadius() {
    return this.props.height / VALUES.BASIC_RADIUS_RATE;
  };

  _proto.calculateEndAngle = function calculateEndAngle(percent) {
    return 2 * Math.PI * percent;
  };

  _proto.getEntityColor = function getEntityColor() {
    var _this$props2 = this.props,
        percent = _this$props2.percent,
        thresholdValue = _this$props2.thresholdValue,
        theme = _this$props2.theme;
    var upperLimit = thresholdValue.upperLimit,
        lowerLimits = thresholdValue.lowerLimits;

    if (_lodash.default.isEmpty(thresholdValue)) {
      return theme.CHART_GREEN;
    }

    if (percent < lowerLimits) {
      return theme.CHART_GREEN;
    }

    if (percent >= lowerLimits && percent < upperLimit) {
      return theme.CHART_ORANGE;
    }

    if (percent >= upperLimit) {
      return theme.CHART_RED;
    }
  };

  _proto.getPercent = function getPercent() {
    var _this$props3 = this.props,
        percent = _this$props3.percent,
        percentText = _this$props3.percentText,
        percentFontSize = _this$props3.percentFontSize;
    var textConfig = {
      textAnchor: 'middle',
      y: 12,
      fill: COLORS.Black,
      style: {
        fontSize: percentFontSize + 'px'
      }
    };

    if (_lodash.default.isNull(percentText)) {
      return _react.default.createElement("text", (0, _extends2.default)({}, textConfig, {
        "data-test-automation-id": "percent",
        id: "percent"
      }), _react.default.createElement("tspan", null, parseInt(percent * 100)), _react.default.createElement("tspan", null, "%"));
    }

    return null;
  };

  _proto.getNoCall = function getNoCall() {
    var _this$props4 = this.props,
        percentText = _this$props4.percentText,
        height = _this$props4.height;
    var noCallStyle = {
      position: 'relative',
      bottom: height * VALUES.NO_CALL_OFFSET_RATE + 22 + "px",
      color: COLORS.Black,
      fontSize: '20px',
      margin: '0 auto',
      width: '145px',
      wordWrap: 'break-word'
    };

    if (_lodash.default.isNull(percentText)) {
      return null;
    }

    return _react.default.createElement("div", {
      style: noCallStyle,
      "data-test-automation-id": "noCalls"
    }, percentText);
  };

  _proto.getWarningText = function getWarningText() {
    var _this$props5 = this.props,
        warningText = _this$props5.warningText,
        height = _this$props5.height;
    var warningTextStyle = {
      position: 'relative',
      bottom: height * VALUES.WARNING_TEXT_OFFSET_RATE + 3 + "px",
      fontSize: '13px',
      margin: '0 auto',
      width: '120px',
      wordWrap: 'break-word'
    };
    return _react.default.createElement("div", {
      style: warningTextStyle,
      "data-test-automation-id": "warning"
    }, warningText);
  };

  _proto.render = function render() {
    var _this$props6 = this.props,
        width = _this$props6.width,
        height = _this$props6.height;
    var containerStyle = {
      width: width + 'px',
      height: height + 'px'
    };
    var gTransform = 'translate(' + height / 2 + ',' + height / 2 + ')';
    var className = (0, _classnames.default)(this.props.className);
    return _react.default.createElement("div", {
      style: containerStyle,
      className: className
    }, _react.default.createElement("svg", {
      width: width,
      height: height,
      role: "img",
      "aria-labelledby": "percent"
    }, _react.default.createElement("g", {
      transform: gTransform
    }, _react.default.createElement("circle", {
      cx: "0",
      cy: "0",
      r: this.calculateRadius(),
      stroke: COLORS.LightGrey,
      fill: "none",
      strokeWidth: "2"
    }), _react.default.createElement("path", {
      ref: "entityPath"
    }), this.getPercent())), this.getWarningText(), this.getNoCall());
  };

  return DonutChart;
}(_react.default.Component);

exports.DonutChart = DonutChart;
(0, _defineProperty2.default)(DonutChart, "propTypes", {
  theme: _propTypes.default.object,
  percent: _propTypes.default.number,
  width: _propTypes.default.number,
  height: _propTypes.default.number,
  alignCenter: _propTypes.default.bool,
  thresholdValue: _propTypes.default.object,
  percentText: _propTypes.default.string,
  warningText: _propTypes.default.string,
  animation: _propTypes.default.bool,
  percentFontSize: _propTypes.default.number,
  testAutomationId: _propTypes.default.string,
  className: _propTypes.default.string
});
(0, _defineProperty2.default)(DonutChart, "defaultProps", {
  width: 220,
  height: 220,
  alignCenter: true,
  percent: 0,
  thresholdValue: {},
  percentText: null,
  warningText: null,
  theme: {
    CHART_GREEN: COLORS.Green,
    CHART_RED: COLORS.Red,
    CHART_ORANGE: COLORS.Orange
  },
  animation: true,
  percentFontSize: 40,
  testAutomationId: 'donutChart',
  className: null
});