'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var react = require('@linaria/react');
var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
var cs = require('classnames');
var React = require('react');
var recharts = require('recharts');
var index = require('../Tooltip/index.js');
var index$1 = require('../Typo/index.js');
var index$2 = require('../../coreX/OverflowTooltip/index.js');
var color = require('../../styles/token/color.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var cs__default = /*#__PURE__*/_interopDefault(cs);
var React__default = /*#__PURE__*/_interopDefault(React);

var DonutChartColor = /* @__PURE__ */(DonutChartColor2 => {
  DonutChartColor2["RED"] = "red";
  DonutChartColor2["GREEN"] = "green";
  DonutChartColor2["YeLLOW"] = "yellow";
  DonutChartColor2["BLUE"] = "blue";
  DonutChartColor2["PURPLE"] = "purple";
  return DonutChartColor2;
})(DonutChartColor || {});
const _exp = /*#__PURE__*/() => props => `${props.width}`;
const DonutChartWrapper = /*#__PURE__*/react.styled('div')({
  name: "DonutChartWrapper",
  class: "E_4100_0_7_d1bw7c5z",
  propsAsIs: false,
  vars: {
    "d1bw7c5z-0": [_exp(), "px"]
  }
});
const TooltipDefaultClass = "E_4100_0_7_t10pqbtc";
const ColorMap = {
  ["blue" /* BLUE */]: [color.Color.chart.blue["blue-9"], color.Color.chart.blue["blue-7"], color.Color.chart.blue["blue-5"], color.Color.chart.blue["blue-3"], color.Color.chart.blue["blue-1"]],
  ["green" /* GREEN */]: [color.Color.chart.green["green-9"], color.Color.chart.green["green-7"], color.Color.chart.green["green-5"], color.Color.chart.green["green-3"], color.Color.chart.green["green-1"]],
  ["red" /* RED */]: [color.Color.chart.red["red-9"], color.Color.chart.red["red-7"], color.Color.chart.red["red-5"], color.Color.chart.red["red-3"], color.Color.chart.red["red-1"]],
  ["yellow" /* YeLLOW */]: [color.Color.chart.yellow["yellow-9"], color.Color.chart.yellow["yellow-7"], color.Color.chart.yellow["yellow-5"], color.Color.chart.yellow["yellow-3"], color.Color.chart.yellow["yellow-1"]],
  ["purple" /* PURPLE */]: [color.Color.chart.purple["purple-9"], color.Color.chart.purple["purple-7"], color.Color.chart.purple["purple-5"], color.Color.chart.purple["purple-3"], color.Color.chart.purple["purple-1"]]
};
const formatCollapse = (collapseData = []) => {
  const value = collapseData.reduce((prev, next) => {
    return prev + next.value;
  }, 0);
  return {
    tooltip: collapseData,
    value
  };
};
const formatChartData = ({
  otherData,
  data,
  t,
  collapseText
}) => {
  var _a, _b, _c, _d, _e, _f, _g, _h;
  if (otherData && data.length < 5) {
    return [...data, {
      name: t("components.other"),
      value: (_a = formatCollapse(otherData)) == null ? void 0 : _a.value,
      color: color.Color.gray["gray-40"],
      tooltip: (_b = formatCollapse(otherData)) == null ? void 0 : _b.tooltip
    }];
  }
  if (otherData && data.length >= 5) {
    const remainData = data.slice(0, 3);
    const needCollapseData = data.slice(3, data.length);
    return [...remainData, {
      name: data[3].name + collapseText,
      value: (_c = formatCollapse(needCollapseData)) == null ? void 0 : _c.value,
      color: null,
      tooltip: (_d = formatCollapse(needCollapseData)) == null ? void 0 : _d.tooltip
    }, {
      name: t("components.other"),
      value: (_e = formatCollapse(otherData)) == null ? void 0 : _e.value,
      color: color.Color.gray["gray-40"],
      tooltip: (_f = formatCollapse(otherData)) == null ? void 0 : _f.tooltip
    }];
  }
  if (data.length > 5) {
    const remainData = data.slice(0, 4);
    const needCollapseData = data.slice(4, data.length);
    return [...remainData, {
      name: data[4].name + collapseText,
      value: (_g = formatCollapse(needCollapseData)) == null ? void 0 : _g.value,
      color: null,
      tooltip: (_h = formatCollapse(needCollapseData)) == null ? void 0 : _h.tooltip
    }];
  }
  return data;
};
const DonutChart = ({
  data,
  centerRender,
  className,
  overlayClassName,
  color,
  otherData,
  collapseText,
  width = 148,
  height = 100,
  innerRadius = 45,
  outerRadius = 50,
  widthPadding = true,
  showLegend = true,
  "data-testid": dataTestId
}) => {
  const initColorMap = color ? ColorMap[color] : [];
  const {
    t
  } = useParrotTranslation();
  const formatData = React.useMemo(() => {
    return formatChartData({
      data,
      otherData,
      collapseText,
      t
    });
  }, [data, otherData, t, collapseText]);
  return /* @__PURE__ */React__default.default.createElement(DonutChartWrapper, {
    "data-testid": dataTestId,
    width
  }, /* @__PURE__ */React__default.default.createElement(recharts.PieChart, {
    width,
    height,
    style: {
      width: "100%"
    },
    className,
    margin: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    }
  }, /* @__PURE__ */React__default.default.createElement(recharts.Pie, {
    dataKey: "value",
    data: formatData,
    innerRadius,
    outerRadius: outerRadius != null ? outerRadius : height / 2,
    cx: width / 2,
    cy: height / 2,
    paddingAngle: widthPadding ? 4 : 0,
    blendStroke: !widthPadding,
    startAngle: 90,
    endAngle: -270,
    stroke: "none"
  }, formatData.map((data2, index) => /* @__PURE__ */React__default.default.createElement(recharts.Cell, {
    key: `cell-${index}`,
    fill: (data2 == null ? void 0 : data2.color) || initColorMap[index]
  }))), showLegend && /* @__PURE__ */React__default.default.createElement(recharts.Legend, {
    iconSize: 8,
    iconType: "square",
    layout: "vertical",
    formatter: (name, _, index$3) => {
      const legendData = formatData[index$3];
      return (legendData == null ? void 0 : legendData.tooltip) ? /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */React__default.default.createElement(index, {
        overlayClassName: cs__default.default(TooltipDefaultClass, overlayClassName),
        title: Array.isArray(legendData.tooltip) ? /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */React__default.default.createElement("div", {
          className: index$1.Typo.Label.l4_bold
        }, legendData.name), legendData.tooltip.map(item => /* @__PURE__ */React__default.default.createElement("div", {
          className: "item"
        }, /* @__PURE__ */React__default.default.createElement("span", {
          className: "name"
        }, item.name), /* @__PURE__ */React__default.default.createElement("span", {
          className: index$1.Typo.Label.l4_bold
        }, item.value)))) : legendData.tooltip
      }, /* @__PURE__ */React__default.default.createElement("div", {
        className: "tooltip-text"
      }, legendData.name)), /* @__PURE__ */React__default.default.createElement("span", {
        className: cs__default.default(index$1.Typo.Label.l4_regular, "value")
      }, legendData.value)) : /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */React__default.default.createElement(index$2, {
        content: legendData.name,
        onClick: () => {
          var _a;
          if ("onClick" in legendData) {
            (_a = legendData.onClick) == null ? void 0 : _a.call(legendData, legendData.name);
          }
        }
      }), /* @__PURE__ */React__default.default.createElement("span", {
        className: cs__default.default(index$1.Typo.Label.l4_regular, "value")
      }, legendData.value));
    }
  })), !!centerRender && /* @__PURE__ */React__default.default.createElement("div", null, "text" in centerRender ? /* @__PURE__ */React__default.default.createElement("div", {
    className: "center"
  }, /* @__PURE__ */React__default.default.createElement("div", {
    className: "number"
  }, centerRender.number), /* @__PURE__ */React__default.default.createElement(index$2, {
    className: "text",
    content: centerRender.text
  })) : centerRender));
};
var DonutChart$1 = DonutChart;

exports.DonutChartColor = DonutChartColor;
exports.default = DonutChart$1;
exports.formatChartData = formatChartData;
exports.formatCollapse = formatCollapse;
