import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../utils/cn.js";
import { getChartMargin, defaultLegendProps, getDefaultChartColor } from "./chart-utils.js";
import { i as isNullish, e as interpolateNumber, R as ResponsiveContainer } from "../../ResponsiveContainer-by1DMaUt.js";
import * as React from "react";
import { PureComponent, useRef, useState, useCallback, forwardRef } from "react";
import { m as createSelector, u as useAppSelector, aw as selectPolarViewBox, k as svgPropertiesNoEvents, ar as polarToCartesian, a5 as selectChartDataAndAlwaysIgnoreIndexes, ax as selectAngleAxis, n as selectChartLayout, w as isCategoricalAxis, x as getBandSizeOfAxis, ay as selectRadiusAxis, S as SetTooltipEntrySettings, A as getTooltipNameProp, h as useIsPanorama, L as Layer, E as getValueByDataKey, f as filterProps, G as Global, r as resolveDefaultProps, J as arrayTooltipSearcher, T as Tooltip } from "../../RechartsWrapper-B6DckFGn.js";
import { s as selectUnfilteredPolarItems, P as PolarChart } from "../../PolarChart-C3HL4nFT.js";
import { c as clsx } from "../../clsx-DgYk2OaC.js";
import { a as selectPolarAxisTicks, s as selectPolarAxisScale, P as PolarAngleAxis, c as PolarRadiusAxis } from "../../PolarAngleAxis-DGQa_dbl.js";
import { J as JavascriptAnimate, L as Legend } from "../../CategoricalChart-B4Tr_94h.js";
import { l as last, L as LabelList } from "../../LabelList-DRKy5CtG.js";
import { P as Polygon } from "../../Polygon-B5nnF46T.js";
import { D as Dot } from "../../Dot-DS5wYRFc.js";
import { A as ActivePoints } from "../../ActivePoints-BPDqHNvn.js";
import { R as RegisterGraphicalItemId, b as SetPolarGraphicalItem, c as SetPolarLegendPayload, u as useAnimationId } from "../../SetGraphicalItem-88i2L04q.js";
var selectAngleAxisTicks$1 = (state, anglexisId) => selectPolarAxisTicks(state, "angleAxis", anglexisId, false);
var selectPolarGridAngles = createSelector([selectAngleAxisTicks$1], (ticks) => {
  if (!ticks) {
    return void 0;
  }
  return ticks.map((tick) => tick.coordinate);
});
var selectRadiusAxisTicks$1 = (state, radiusAxisId) => selectPolarAxisTicks(state, "radiusAxis", radiusAxisId, false);
var selectPolarGridRadii = createSelector([selectRadiusAxisTicks$1], (ticks) => {
  if (!ticks) {
    return void 0;
  }
  return ticks.map((tick) => tick.coordinate);
});
var _excluded$1 = ["gridType", "radialLines", "angleAxisId", "radiusAxisId", "cx", "cy", "innerRadius", "outerRadius"];
function _objectWithoutProperties$1(e, t) {
  if (null == e) return {};
  var o, r, i = _objectWithoutPropertiesLoose$1(e, t);
  if (Object.getOwnPropertySymbols) {
    var n = Object.getOwnPropertySymbols(e);
    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
  }
  return i;
}
function _objectWithoutPropertiesLoose$1(r, e) {
  if (null == r) return {};
  var t = {};
  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
    if (-1 !== e.indexOf(n)) continue;
    t[n] = r[n];
  }
  return t;
}
function _extends$1() {
  return _extends$1 = Object.assign ? Object.assign.bind() : function(n) {
    for (var e = 1; e < arguments.length; e++) {
      var t = arguments[e];
      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
    }
    return n;
  }, _extends$1.apply(null, arguments);
}
function ownKeys$2(e, r) {
  var t = Object.keys(e);
  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    r && (o = o.filter(function(r2) {
      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
    })), t.push.apply(t, o);
  }
  return t;
}
function _objectSpread$2(e) {
  for (var r = 1; r < arguments.length; r++) {
    var t = null != arguments[r] ? arguments[r] : {};
    r % 2 ? ownKeys$2(Object(t), true).forEach(function(r2) {
      _defineProperty$2(e, r2, t[r2]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function(r2) {
      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
    });
  }
  return e;
}
function _defineProperty$2(e, r, t) {
  return (r = _toPropertyKey$2(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
}
function _toPropertyKey$2(t) {
  var i = _toPrimitive$2(t, "string");
  return "symbol" == typeof i ? i : i + "";
}
function _toPrimitive$2(t, r) {
  if ("object" != typeof t || !t) return t;
  var e = t[Symbol.toPrimitive];
  if (void 0 !== e) {
    var i = e.call(t, r);
    if ("object" != typeof i) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return ("string" === r ? String : Number)(t);
}
var getPolygonPath = (radius, cx, cy, polarAngles) => {
  var path = "";
  polarAngles.forEach((angle, i) => {
    var point = polarToCartesian(cx, cy, radius, angle);
    if (i) {
      path += "L ".concat(point.x, ",").concat(point.y);
    } else {
      path += "M ".concat(point.x, ",").concat(point.y);
    }
  });
  path += "Z";
  return path;
};
var PolarAngles = (props) => {
  var {
    cx,
    cy,
    innerRadius,
    outerRadius,
    polarAngles,
    radialLines
  } = props;
  if (!polarAngles || !polarAngles.length || !radialLines) {
    return null;
  }
  var polarAnglesProps = _objectSpread$2({
    stroke: "#ccc"
  }, svgPropertiesNoEvents(props));
  return /* @__PURE__ */ React.createElement("g", {
    className: "recharts-polar-grid-angle"
  }, polarAngles.map((entry) => {
    var start = polarToCartesian(cx, cy, innerRadius, entry);
    var end = polarToCartesian(cx, cy, outerRadius, entry);
    return /* @__PURE__ */ React.createElement("line", _extends$1({}, polarAnglesProps, {
      key: "line-".concat(entry),
      x1: start.x,
      y1: start.y,
      x2: end.x,
      y2: end.y
    }));
  }));
};
var ConcentricCircle = (props) => {
  var {
    cx,
    cy,
    radius,
    index
  } = props;
  var concentricCircleProps = _objectSpread$2(_objectSpread$2({
    stroke: "#ccc"
  }, svgPropertiesNoEvents(props)), {}, {
    fill: "none"
  });
  return (
    // @ts-expect-error wrong SVG element type
    /* @__PURE__ */ React.createElement("circle", _extends$1({}, concentricCircleProps, {
      className: clsx("recharts-polar-grid-concentric-circle", props.className),
      key: "circle-".concat(index),
      cx,
      cy,
      r: radius
    }))
  );
};
var ConcentricPolygon = (props) => {
  var {
    radius,
    index
  } = props;
  var concentricPolygonProps = _objectSpread$2(_objectSpread$2({
    stroke: "#ccc"
  }, svgPropertiesNoEvents(props)), {}, {
    fill: "none"
  });
  return /* @__PURE__ */ React.createElement("path", _extends$1({}, concentricPolygonProps, {
    className: clsx("recharts-polar-grid-concentric-polygon", props.className),
    key: "path-".concat(index),
    d: getPolygonPath(radius, props.cx, props.cy, props.polarAngles)
  }));
};
var ConcentricGridPath = (props) => {
  var {
    polarRadius,
    gridType
  } = props;
  if (!polarRadius || !polarRadius.length) {
    return null;
  }
  return /* @__PURE__ */ React.createElement("g", {
    className: "recharts-polar-grid-concentric"
  }, polarRadius.map((entry, i) => {
    var key = i;
    if (gridType === "circle") return /* @__PURE__ */ React.createElement(ConcentricCircle, _extends$1({
      key
    }, props, {
      radius: entry,
      index: i
    }));
    return /* @__PURE__ */ React.createElement(ConcentricPolygon, _extends$1({
      key
    }, props, {
      radius: entry,
      index: i
    }));
  }));
};
var PolarGrid = (_ref) => {
  var _ref2, _polarViewBox$cx, _ref3, _polarViewBox$cy, _ref4, _polarViewBox$innerRa, _ref5, _polarViewBox$outerRa;
  var {
    gridType = "polygon",
    radialLines = true,
    angleAxisId = 0,
    radiusAxisId = 0,
    cx: cxFromOutside,
    cy: cyFromOutside,
    innerRadius: innerRadiusFromOutside,
    outerRadius: outerRadiusFromOutside
  } = _ref, inputs = _objectWithoutProperties$1(_ref, _excluded$1);
  var polarViewBox = useAppSelector(selectPolarViewBox);
  var props = _objectSpread$2({
    cx: (_ref2 = (_polarViewBox$cx = polarViewBox === null || polarViewBox === void 0 ? void 0 : polarViewBox.cx) !== null && _polarViewBox$cx !== void 0 ? _polarViewBox$cx : cxFromOutside) !== null && _ref2 !== void 0 ? _ref2 : 0,
    cy: (_ref3 = (_polarViewBox$cy = polarViewBox === null || polarViewBox === void 0 ? void 0 : polarViewBox.cy) !== null && _polarViewBox$cy !== void 0 ? _polarViewBox$cy : cyFromOutside) !== null && _ref3 !== void 0 ? _ref3 : 0,
    innerRadius: (_ref4 = (_polarViewBox$innerRa = polarViewBox === null || polarViewBox === void 0 ? void 0 : polarViewBox.innerRadius) !== null && _polarViewBox$innerRa !== void 0 ? _polarViewBox$innerRa : innerRadiusFromOutside) !== null && _ref4 !== void 0 ? _ref4 : 0,
    outerRadius: (_ref5 = (_polarViewBox$outerRa = polarViewBox === null || polarViewBox === void 0 ? void 0 : polarViewBox.outerRadius) !== null && _polarViewBox$outerRa !== void 0 ? _polarViewBox$outerRa : outerRadiusFromOutside) !== null && _ref5 !== void 0 ? _ref5 : 0
  }, inputs);
  var {
    polarAngles: polarAnglesInput,
    polarRadius: polarRadiusInput,
    cx,
    cy,
    innerRadius,
    outerRadius
  } = props;
  var polarAnglesFromRedux = useAppSelector((state) => selectPolarGridAngles(state, angleAxisId));
  var polarRadiiFromRedux = useAppSelector((state) => selectPolarGridRadii(state, radiusAxisId));
  var polarAngles = Array.isArray(polarAnglesInput) ? polarAnglesInput : polarAnglesFromRedux;
  var polarRadius = Array.isArray(polarRadiusInput) ? polarRadiusInput : polarRadiiFromRedux;
  if (outerRadius <= 0 || polarAngles == null || polarRadius == null) {
    return null;
  }
  return /* @__PURE__ */ React.createElement("g", {
    className: "recharts-polar-grid"
  }, /* @__PURE__ */ React.createElement(PolarAngles, _extends$1({
    cx,
    cy,
    innerRadius,
    outerRadius,
    gridType,
    radialLines
  }, props, {
    polarAngles,
    polarRadius
  })), /* @__PURE__ */ React.createElement(ConcentricGridPath, _extends$1({
    cx,
    cy,
    innerRadius,
    outerRadius,
    gridType,
    radialLines
  }, props, {
    polarAngles,
    polarRadius
  })));
};
PolarGrid.displayName = "PolarGrid";
function ownKeys$1(e, r) {
  var t = Object.keys(e);
  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    r && (o = o.filter(function(r2) {
      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
    })), t.push.apply(t, o);
  }
  return t;
}
function _objectSpread$1(e) {
  for (var r = 1; r < arguments.length; r++) {
    var t = null != arguments[r] ? arguments[r] : {};
    r % 2 ? ownKeys$1(Object(t), true).forEach(function(r2) {
      _defineProperty$1(e, r2, t[r2]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function(r2) {
      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
    });
  }
  return e;
}
function _defineProperty$1(e, r, t) {
  return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
}
function _toPropertyKey$1(t) {
  var i = _toPrimitive$1(t, "string");
  return "symbol" == typeof i ? i : i + "";
}
function _toPrimitive$1(t, r) {
  if ("object" != typeof t || !t) return t;
  var e = t[Symbol.toPrimitive];
  if (void 0 !== e) {
    var i = e.call(t, r);
    if ("object" != typeof i) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return ("string" === r ? String : Number)(t);
}
var selectRadiusAxisScale = (state, radiusAxisId) => selectPolarAxisScale(state, "radiusAxis", radiusAxisId);
var selectRadiusAxisForRadar = createSelector([selectRadiusAxisScale], (scale) => {
  if (scale == null) {
    return void 0;
  }
  return {
    scale
  };
});
var selectRadiusAxisForBandSize = createSelector([selectRadiusAxis, selectRadiusAxisScale], (axisSettings, scale) => {
  if (axisSettings == null || scale == null) {
    return void 0;
  }
  return _objectSpread$1(_objectSpread$1({}, axisSettings), {}, {
    scale
  });
});
var selectRadiusAxisTicks = (state, radiusAxisId, _angleAxisId, isPanorama) => {
  return selectPolarAxisTicks(state, "radiusAxis", radiusAxisId, isPanorama);
};
var selectAngleAxisForRadar = (state, _radiusAxisId, angleAxisId) => selectAngleAxis(state, angleAxisId);
var selectPolarAxisScaleForRadar = (state, _radiusAxisId, angleAxisId) => selectPolarAxisScale(state, "angleAxis", angleAxisId);
var selectAngleAxisForBandSize = createSelector([selectAngleAxisForRadar, selectPolarAxisScaleForRadar], (axisSettings, scale) => {
  if (axisSettings == null || scale == null) {
    return void 0;
  }
  return _objectSpread$1(_objectSpread$1({}, axisSettings), {}, {
    scale
  });
});
var selectAngleAxisTicks = (state, _radiusAxisId, angleAxisId, isPanorama) => {
  return selectPolarAxisTicks(state, "angleAxis", angleAxisId, isPanorama);
};
var selectAngleAxisWithScaleAndViewport = createSelector([selectAngleAxisForRadar, selectPolarAxisScaleForRadar, selectPolarViewBox], (axisOptions, scale, polarViewBox) => {
  if (polarViewBox == null || scale == null) {
    return void 0;
  }
  return {
    scale,
    type: axisOptions.type,
    dataKey: axisOptions.dataKey,
    cx: polarViewBox.cx,
    cy: polarViewBox.cy
  };
});
var pickDataKey = (_state, _radiusAxisId, _angleAxisId, _isPanorama, radarDataKey) => radarDataKey;
var selectBandSizeOfAxis = createSelector([selectChartLayout, selectRadiusAxisForBandSize, selectRadiusAxisTicks, selectAngleAxisForBandSize, selectAngleAxisTicks], (layout, radiusAxis, radiusAxisTicks, angleAxis, angleAxisTicks) => {
  if (isCategoricalAxis(layout, "radiusAxis")) {
    return getBandSizeOfAxis(radiusAxis, radiusAxisTicks, false);
  }
  return getBandSizeOfAxis(angleAxis, angleAxisTicks, false);
});
var selectSynchronisedRadarDataKey = createSelector([selectUnfilteredPolarItems, pickDataKey], (graphicalItems, radarDataKey) => {
  if (graphicalItems.some((pgis) => pgis.type === "radar" && radarDataKey === pgis.dataKey)) {
    return radarDataKey;
  }
  return void 0;
});
var selectRadarPoints = createSelector([selectRadiusAxisForRadar, selectAngleAxisWithScaleAndViewport, selectChartDataAndAlwaysIgnoreIndexes, selectSynchronisedRadarDataKey, selectBandSizeOfAxis], (radiusAxis, angleAxis, _ref, dataKey, bandSize) => {
  var {
    chartData,
    dataStartIndex,
    dataEndIndex
  } = _ref;
  if (radiusAxis == null || angleAxis == null || chartData == null || bandSize == null || dataKey == null) {
    return void 0;
  }
  var displayedData = chartData.slice(dataStartIndex, dataEndIndex + 1);
  return computeRadarPoints({
    radiusAxis,
    angleAxis,
    displayedData,
    dataKey,
    bandSize
  });
});
var _excluded = ["id"];
function _objectWithoutProperties(e, t) {
  if (null == e) return {};
  var o, r, i = _objectWithoutPropertiesLoose(e, t);
  if (Object.getOwnPropertySymbols) {
    var n = Object.getOwnPropertySymbols(e);
    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
  }
  return i;
}
function _objectWithoutPropertiesLoose(r, e) {
  if (null == r) return {};
  var t = {};
  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
    if (-1 !== e.indexOf(n)) continue;
    t[n] = r[n];
  }
  return t;
}
function ownKeys(e, r) {
  var t = Object.keys(e);
  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    r && (o = o.filter(function(r2) {
      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
    })), t.push.apply(t, o);
  }
  return t;
}
function _objectSpread(e) {
  for (var r = 1; r < arguments.length; r++) {
    var t = null != arguments[r] ? arguments[r] : {};
    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
      _defineProperty(e, r2, t[r2]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
    });
  }
  return e;
}
function _defineProperty(e, r, t) {
  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
}
function _toPropertyKey(t) {
  var i = _toPrimitive(t, "string");
  return "symbol" == typeof i ? i : i + "";
}
function _toPrimitive(t, r) {
  if ("object" != typeof t || !t) return t;
  var e = t[Symbol.toPrimitive];
  if (void 0 !== e) {
    var i = e.call(t, r);
    if ("object" != typeof i) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return ("string" === r ? String : Number)(t);
}
function _extends() {
  return _extends = Object.assign ? Object.assign.bind() : function(n) {
    for (var e = 1; e < arguments.length; e++) {
      var t = arguments[e];
      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
    }
    return n;
  }, _extends.apply(null, arguments);
}
function getLegendItemColor(stroke, fill) {
  return stroke && stroke !== "none" ? stroke : fill;
}
var computeLegendPayloadFromRadarSectors = (props) => {
  var {
    dataKey,
    name,
    stroke,
    fill,
    legendType,
    hide
  } = props;
  return [{
    inactive: hide,
    dataKey,
    type: legendType,
    color: getLegendItemColor(stroke, fill),
    value: getTooltipNameProp(name, dataKey),
    payload: props
  }];
};
function getTooltipEntrySettings(props) {
  var {
    dataKey,
    stroke,
    strokeWidth,
    fill,
    name,
    hide,
    tooltipType
  } = props;
  return {
    /*
     * I suppose this here _could_ return props.points
     * because while Radar does not support item tooltip mode, it _could_ support it.
     * But when I actually do return the points here, a defaultIndex test starts failing.
     * So, undefined it is.
     */
    dataDefinedOnItem: void 0,
    positions: void 0,
    settings: {
      stroke,
      strokeWidth,
      fill,
      nameKey: void 0,
      // RadarChart does not have nameKey unfortunately
      dataKey,
      name: getTooltipNameProp(name, dataKey),
      hide,
      type: tooltipType,
      color: getLegendItemColor(stroke, fill),
      unit: ""
      // why doesn't Radar support unit?
    }
  };
}
function renderDotItem(option, props) {
  var dotItem;
  if (/* @__PURE__ */ React.isValidElement(option)) {
    dotItem = /* @__PURE__ */ React.cloneElement(option, props);
  } else if (typeof option === "function") {
    dotItem = option(props);
  } else {
    dotItem = /* @__PURE__ */ React.createElement(Dot, _extends({}, props, {
      className: clsx("recharts-radar-dot", typeof option !== "boolean" ? option.className : "")
    }));
  }
  return dotItem;
}
function computeRadarPoints(_ref) {
  var {
    radiusAxis,
    angleAxis,
    displayedData,
    dataKey,
    bandSize
  } = _ref;
  var {
    cx,
    cy
  } = angleAxis;
  var isRange = false;
  var points = [];
  var angleBandSize = angleAxis.type !== "number" ? bandSize !== null && bandSize !== void 0 ? bandSize : 0 : 0;
  displayedData.forEach((entry, i) => {
    var name = getValueByDataKey(entry, angleAxis.dataKey, i);
    var value = getValueByDataKey(entry, dataKey);
    var angle = angleAxis.scale(name) + angleBandSize;
    var pointValue = Array.isArray(value) ? last(value) : value;
    var radius = isNullish(pointValue) ? void 0 : radiusAxis.scale(pointValue);
    if (Array.isArray(value) && value.length >= 2) {
      isRange = true;
    }
    points.push(_objectSpread(_objectSpread({}, polarToCartesian(cx, cy, radius, angle)), {}, {
      // @ts-expect-error getValueByDataKey does not validate the output type
      name,
      // @ts-expect-error getValueByDataKey does not validate the output type
      value,
      cx,
      cy,
      radius,
      angle,
      payload: entry
    }));
  });
  var baseLinePoints = [];
  if (isRange) {
    points.forEach((point) => {
      if (Array.isArray(point.value)) {
        var baseValue = point.value[0];
        var radius = isNullish(baseValue) ? void 0 : radiusAxis.scale(baseValue);
        baseLinePoints.push(_objectSpread(_objectSpread({}, point), {}, {
          radius
        }, polarToCartesian(cx, cy, radius, point.angle)));
      } else {
        baseLinePoints.push(point);
      }
    });
  }
  return {
    points,
    isRange,
    baseLinePoints
  };
}
function Dots(_ref2) {
  var {
    points,
    props
  } = _ref2;
  var {
    dot,
    dataKey
  } = props;
  if (!dot) {
    return null;
  }
  var {
    id
  } = props, propsWithoutId = _objectWithoutProperties(props, _excluded);
  var baseProps = svgPropertiesNoEvents(propsWithoutId);
  var customDotProps = filterProps(dot, true);
  var dots = points.map((entry, i) => {
    var dotProps = _objectSpread(_objectSpread(_objectSpread({
      key: "dot-".concat(i),
      r: 3
    }, baseProps), customDotProps), {}, {
      dataKey,
      cx: entry.x,
      cy: entry.y,
      index: i,
      payload: entry
    });
    return renderDotItem(dot, dotProps);
  });
  return /* @__PURE__ */ React.createElement(Layer, {
    className: "recharts-radar-dots"
  }, dots);
}
function StaticPolygon(_ref3) {
  var {
    points,
    props,
    showLabels
  } = _ref3;
  if (points == null) {
    return null;
  }
  var {
    shape,
    isRange,
    baseLinePoints,
    connectNulls
  } = props;
  var handleMouseEnter = (e) => {
    var {
      onMouseEnter
    } = props;
    if (onMouseEnter) {
      onMouseEnter(props, e);
    }
  };
  var handleMouseLeave = (e) => {
    var {
      onMouseLeave
    } = props;
    if (onMouseLeave) {
      onMouseLeave(props, e);
    }
  };
  var radar;
  if (/* @__PURE__ */ React.isValidElement(shape)) {
    radar = /* @__PURE__ */ React.cloneElement(shape, _objectSpread(_objectSpread({}, props), {}, {
      points
    }));
  } else if (typeof shape === "function") {
    radar = shape(_objectSpread(_objectSpread({}, props), {}, {
      points
    }));
  } else {
    radar = /* @__PURE__ */ React.createElement(Polygon, _extends({}, filterProps(props, true), {
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave,
      points,
      baseLinePoints: isRange ? baseLinePoints : null,
      connectNulls
    }));
  }
  return /* @__PURE__ */ React.createElement(Layer, {
    className: "recharts-radar-polygon"
  }, radar, /* @__PURE__ */ React.createElement(Dots, {
    props,
    points
  }), showLabels && LabelList.renderCallByParent(props, points));
}
function PolygonWithAnimation(_ref4) {
  var {
    props,
    previousPointsRef
  } = _ref4;
  var {
    points,
    isAnimationActive,
    animationBegin,
    animationDuration,
    animationEasing,
    onAnimationEnd,
    onAnimationStart
  } = props;
  var prevPoints = previousPointsRef.current;
  var animationId = useAnimationId(props, "recharts-radar-");
  var [isAnimating, setIsAnimating] = useState(true);
  var handleAnimationEnd = useCallback(() => {
    if (typeof onAnimationEnd === "function") {
      onAnimationEnd();
    }
    setIsAnimating(false);
  }, [onAnimationEnd]);
  var handleAnimationStart = useCallback(() => {
    if (typeof onAnimationStart === "function") {
      onAnimationStart();
    }
    setIsAnimating(true);
  }, [onAnimationStart]);
  return /* @__PURE__ */ React.createElement(JavascriptAnimate, {
    begin: animationBegin,
    duration: animationDuration,
    isActive: isAnimationActive,
    easing: animationEasing,
    key: "radar-".concat(animationId),
    onAnimationEnd: handleAnimationEnd,
    onAnimationStart: handleAnimationStart
  }, (t) => {
    var prevPointsDiffFactor = prevPoints && prevPoints.length / points.length;
    var stepData = t === 1 ? points : points.map((entry, index) => {
      var prev = prevPoints && prevPoints[Math.floor(index * prevPointsDiffFactor)];
      if (prev) {
        var _interpolatorX = interpolateNumber(prev.x, entry.x);
        var _interpolatorY = interpolateNumber(prev.y, entry.y);
        return _objectSpread(_objectSpread({}, entry), {}, {
          x: _interpolatorX(t),
          y: _interpolatorY(t)
        });
      }
      var interpolatorX = interpolateNumber(entry.cx, entry.x);
      var interpolatorY = interpolateNumber(entry.cy, entry.y);
      return _objectSpread(_objectSpread({}, entry), {}, {
        x: interpolatorX(t),
        y: interpolatorY(t)
      });
    });
    if (t > 0) {
      previousPointsRef.current = stepData;
    }
    return /* @__PURE__ */ React.createElement(StaticPolygon, {
      points: stepData,
      props,
      showLabels: !isAnimating
    });
  });
}
function RenderPolygon(props) {
  var {
    points,
    isAnimationActive,
    isRange
  } = props;
  var previousPointsRef = useRef(void 0);
  var prevPoints = previousPointsRef.current;
  if (isAnimationActive && points && points.length && !isRange && (!prevPoints || prevPoints !== points)) {
    return /* @__PURE__ */ React.createElement(PolygonWithAnimation, {
      props,
      previousPointsRef
    });
  }
  return /* @__PURE__ */ React.createElement(StaticPolygon, {
    points,
    props,
    showLabels: true
  });
}
var defaultRadarProps = {
  angleAxisId: 0,
  radiusAxisId: 0,
  hide: false,
  activeDot: true,
  dot: false,
  legendType: "rect",
  isAnimationActive: !Global.isSsr,
  animationBegin: 0,
  animationDuration: 1500,
  animationEasing: "ease"
};
class RadarWithState extends PureComponent {
  render() {
    var {
      hide,
      className,
      points
    } = this.props;
    if (hide) {
      return null;
    }
    var layerClass = clsx("recharts-radar", className);
    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Layer, {
      className: layerClass
    }, /* @__PURE__ */ React.createElement(RenderPolygon, this.props)), /* @__PURE__ */ React.createElement(ActivePoints, {
      points,
      mainColor: getLegendItemColor(this.props.stroke, this.props.fill),
      itemDataKey: this.props.dataKey,
      activeDot: this.props.activeDot
    }));
  }
}
function RadarImpl(props) {
  var isPanorama = useIsPanorama();
  var radarPoints = useAppSelector((state) => selectRadarPoints(state, props.radiusAxisId, props.angleAxisId, isPanorama, props.dataKey));
  return /* @__PURE__ */ React.createElement(RadarWithState, _extends({}, props, {
    points: radarPoints === null || radarPoints === void 0 ? void 0 : radarPoints.points,
    baseLinePoints: radarPoints === null || radarPoints === void 0 ? void 0 : radarPoints.baseLinePoints,
    isRange: radarPoints === null || radarPoints === void 0 ? void 0 : radarPoints.isRange
  }));
}
class Radar extends PureComponent {
  render() {
    return /* @__PURE__ */ React.createElement(RegisterGraphicalItemId, {
      id: this.props.id,
      type: "radar"
    }, (id) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SetPolarGraphicalItem, {
      type: "radar",
      id,
      data: void 0,
      dataKey: this.props.dataKey,
      hide: this.props.hide,
      angleAxisId: this.props.angleAxisId,
      radiusAxisId: this.props.radiusAxisId
    }), /* @__PURE__ */ React.createElement(SetPolarLegendPayload, {
      legendPayload: computeLegendPayloadFromRadarSectors(this.props)
    }), /* @__PURE__ */ React.createElement(SetTooltipEntrySettings, {
      fn: getTooltipEntrySettings,
      args: this.props
    }), /* @__PURE__ */ React.createElement(RadarImpl, _extends({}, this.props, {
      id
    }))));
  }
}
_defineProperty(Radar, "displayName", "Radar");
_defineProperty(Radar, "defaultProps", defaultRadarProps);
var allowedTooltipTypes = ["axis"];
var defaultProps = {
  layout: "centric",
  startAngle: 90,
  endAngle: -270,
  cx: "50%",
  cy: "50%",
  innerRadius: 0,
  outerRadius: "80%"
};
var RadarChart$1 = /* @__PURE__ */ forwardRef((props, ref) => {
  var propsWithDefaults = resolveDefaultProps(props, defaultProps);
  return /* @__PURE__ */ React.createElement(PolarChart, {
    chartName: "RadarChart",
    defaultTooltipEventType: "axis",
    validateTooltipEventTypes: allowedTooltipTypes,
    tooltipPayloadSearcher: arrayTooltipSearcher,
    categoricalChartProps: propsWithDefaults,
    ref
  });
});
const PolarAngleAxisFixed = PolarAngleAxis;
const PolarRadiusAxisFixed = PolarRadiusAxis;
const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-subtle bg-popover/95 backdrop-blur-md p-3 shadow-2xl", children: [
      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-strong mb-2", children: label }),
      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: payload.map((entry, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ jsx(
          "div",
          {
            className: "w-2 h-2 rounded-full",
            style: { backgroundColor: entry.color }
          }
        ),
        /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-subtle", children: [
          entry.name,
          ":"
        ] }),
        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-strong ml-auto", children: typeof entry.value === "number" ? entry.value.toLocaleString() : entry.value })
      ] }, index)) })
    ] });
  }
  return null;
};
function RadarChart({
  data,
  config,
  className,
  showGrid = true,
  showTooltip = true,
  showLegend = false,
  angleAxisKey = "subject",
  angleAxisProps,
  radiusAxisProps,
  tooltipProps,
  legendProps,
  radarProps,
  height = 400,
  width = "100%"
}) {
  const getColor = (index, customColor) => {
    if (customColor) return customColor;
    return getDefaultChartColor(index);
  };
  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(RadarChart$1, { data, margin: getChartMargin(showLegend), children: [
    showGrid && /* @__PURE__ */ jsx(
      PolarGrid,
      {
        stroke: "var(--border-default)",
        strokeOpacity: 0.3,
        radialLines: false
      }
    ),
    /* @__PURE__ */ jsx(
      PolarAngleAxisFixed,
      {
        dataKey: angleAxisKey,
        tick: { fill: "var(--text-subtle)", fontSize: 10 },
        ...angleAxisProps
      }
    ),
    /* @__PURE__ */ jsx(
      PolarRadiusAxisFixed,
      {
        angle: 90,
        tick: { fill: "var(--text-subtle)", fontSize: 10 },
        axisLine: false,
        ...radiusAxisProps
      }
    ),
    showTooltip && /* @__PURE__ */ jsx(
      Tooltip,
      {
        content: /* @__PURE__ */ jsx(CustomTooltip, {}),
        cursor: { fill: "var(--bg-subtle)" },
        ...tooltipProps
      }
    ),
    showLegend && /* @__PURE__ */ jsx(Legend, { ...defaultLegendProps, ...legendProps }),
    Object.entries(config).map(([key, value], index) => /* @__PURE__ */ jsx(
      Radar,
      {
        name: value.label || key,
        dataKey: key,
        stroke: getColor(index, value.color),
        fill: getColor(index, value.color),
        fillOpacity: value.fillOpacity || 0.3,
        strokeWidth: 2,
        isAnimationActive: false,
        ...radarProps
      },
      key
    ))
  ] }) }) });
}
RadarChart.displayName = "RadarChart";
export {
  RadarChart
};
