"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var circle_donut_exports = {};
__export(circle_donut_exports, {
  CircleDonut: () => CircleDonut
});
module.exports = __toCommonJS(circle_donut_exports);
var import_classnames = __toESM(require("classnames"));
var import_react = __toESM(require("react"));
var import_shape_view_renderer = require("./../../_shared/shape-view-renderer.js");
var import_consts = require("./../../_shared/shape-view-renderer/consts.js");
var import_theme_color_token = require("./../../_shared/theme-color-token.js");
var import_consts2 = require("../consts.js");
var import_cell_position = require("../utils/cell-position.js");
var import_resolve_shape_src = require("../utils/resolve-shape-src.js");
var import_smart_block_context = require("../utils/smart-block-context.js");
var import_circle_donut_scss = __toESM(require("./circle-donut-scss.js"));
var import_shape_overlay = require("./shape-overlay.js");
const CENTER = import_consts2.CIRCLE_BOX_SIZE / 2;
const MID_RADIUS = (import_consts2.CIRCLE_OUTER_RADIUS + import_consts2.CIRCLE_INNER_RADIUS) / 2;
const FALLBACK_FILL = "#E7F0FF";
const CircleDonut = import_react.default.memo(
  ({ cells, themeAccentColor, themeLabelColor, isShapesMode, gridRow }) => {
    const onIndicatorClick = (0, import_smart_block_context.useSmartBlockEditorContext)()?.onCellShapeClick;
    const total = cells.length;
    if (total === 0) {
      return null;
    }
    const resolveFill = (cell) => {
      const raw = cell.accentColor ?? themeAccentColor ?? FALLBACK_FILL;
      return (0, import_theme_color_token.resolveDocumentColorToCss)(raw) ?? raw;
    };
    return /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: import_circle_donut_scss.default.circleDonut,
        "data-circle-donut": "true",
        "aria-hidden": "true",
        style: gridRow ? { gridRow } : void 0
      },
      /* @__PURE__ */ import_react.default.createElement(
        "svg",
        {
          className: import_circle_donut_scss.default.svg,
          viewBox: `0 0 ${import_consts2.CIRCLE_BOX_SIZE} ${import_consts2.CIRCLE_BOX_SIZE}`,
          preserveAspectRatio: "xMidYMid meet",
          xmlns: "http://www.w3.org/2000/svg"
        },
        total === 1 ? /* @__PURE__ */ import_react.default.createElement("path", { d: buildFullRingPath(), fill: resolveFill(cells[0]), fillRule: "evenodd" }) : cells.map((cell, i) => {
          const { start, end } = getSegmentAngles(i, total);
          return /* @__PURE__ */ import_react.default.createElement("path", { key: i, d: buildSectorPath(start, end), fill: resolveFill(cell) });
        })
      ),
      cells.map((cell, i) => {
        const { mid } = getSegmentAngles(i, total);
        const { x, y } = polar(MID_RADIUS, mid);
        const hasShape = !!cell.shape || isShapesMode;
        const shapeSrc = hasShape ? (0, import_resolve_shape_src.resolveShapeSrc)(cell.shape ?? void 0) : void 0;
        const resolvedShapeColor = cell.shapeColor ?? themeLabelColor ?? null;
        const shapeColors = resolvedShapeColor ? { [import_consts.DEFAULT_COLOR]: resolvedShapeColor } : {};
        const style = {
          left: `${x / import_consts2.CIRCLE_BOX_SIZE * 100}%`,
          top: `${y / import_consts2.CIRCLE_BOX_SIZE * 100}%`
        };
        const interactive = Boolean(onIndicatorClick && cell.cellId && hasShape);
        return /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            key: i,
            className: (0, import_classnames.default)(import_circle_donut_scss.default.indicator, interactive && import_circle_donut_scss.default.indicatorInteractive),
            style
          },
          shapeSrc ? /* @__PURE__ */ import_react.default.createElement("div", { className: import_circle_donut_scss.default.indicatorShape }, /* @__PURE__ */ import_react.default.createElement(
            import_shape_view_renderer.ShapeViewRenderer,
            {
              shapeSrc,
              colors: shapeColors,
              hideLoadingOverlay: true,
              preserveAspectRatio: "xMidYMid meet",
              style: { width: "100%", height: "100%" }
            }
          )) : /* @__PURE__ */ import_react.default.createElement("span", { className: import_circle_donut_scss.default.indicatorNumber }, i + 1),
          interactive && /* @__PURE__ */ import_react.default.createElement(
            import_shape_overlay.ShapeOverlay,
            {
              overlayClassName: import_circle_donut_scss.default.cellLabelAddOverlay,
              hasShape,
              onClick: (event) => onIndicatorClick(cell.cellId, event)
            }
          )
        );
      })
    );
  }
);
CircleDonut.displayName = "CircleDonut";
const polar = (radius, angleDeg) => {
  const angleRad = angleDeg * Math.PI / 180;
  return {
    x: CENTER + radius * Math.sin(angleRad),
    y: CENTER - radius * Math.cos(angleRad)
  };
};
const getSegmentAngles = (index, total) => {
  const span = 360 / total;
  const mid = (0, import_cell_position.getCellMidAngleDeg)(index, total);
  return {
    start: mid - span / 2,
    end: mid + span / 2,
    mid
  };
};
const DEG_TO_RAD = Math.PI / 180;
const cosDeg = (deg) => Math.cos(deg * DEG_TO_RAD);
const sinDeg = (deg) => Math.sin(deg * DEG_TO_RAD);
const buildSectorPath = (start, end) => {
  const outerR = import_consts2.CIRCLE_OUTER_RADIUS;
  const innerR = import_consts2.CIRCLE_INNER_RADIUS;
  const cornerR = import_consts2.CIRCLE_CORNER_RADIUS;
  const halfGap = import_consts2.CIRCLE_SEGMENT_GAP / 2;
  const oRadial = outerR - cornerR;
  const iRadial = innerR + cornerR;
  const outerGamma = Math.asin((halfGap + cornerR) / oRadial) * 180 / Math.PI;
  const innerGamma = Math.asin((halfGap + cornerR) / iRadial) * 180 / Math.PI;
  const awayEndX = cosDeg(end);
  const awayEndY = sinDeg(end);
  const awayStartX = -cosDeg(start);
  const awayStartY = -sinDeg(start);
  const A = polar(outerR, start + outerGamma);
  const B = polar(outerR, end - outerGamma);
  const E = polar(innerR, end - innerGamma);
  const F = polar(innerR, start + innerGamma);
  const ccCo = polar(oRadial, end - outerGamma);
  const ccCi = polar(iRadial, end - innerGamma);
  const ccGi = polar(iRadial, start + innerGamma);
  const ccHo = polar(oRadial, start + outerGamma);
  const C = { x: ccCo.x + cornerR * awayEndX, y: ccCo.y + cornerR * awayEndY };
  const D = { x: ccCi.x + cornerR * awayEndX, y: ccCi.y + cornerR * awayEndY };
  const G = { x: ccGi.x + cornerR * awayStartX, y: ccGi.y + cornerR * awayStartY };
  const H = { x: ccHo.x + cornerR * awayStartX, y: ccHo.y + cornerR * awayStartY };
  const outerSpan = end - start - 2 * outerGamma;
  const innerSpan = end - start - 2 * innerGamma;
  const largeOuter = outerSpan > 180 ? 1 : 0;
  const largeInner = innerSpan > 180 ? 1 : 0;
  return `M ${A.x} ${A.y} A ${outerR} ${outerR} 0 ${largeOuter} 1 ${B.x} ${B.y} A ${cornerR} ${cornerR} 0 0 1 ${C.x} ${C.y} L ${D.x} ${D.y} A ${cornerR} ${cornerR} 0 0 1 ${E.x} ${E.y} A ${innerR} ${innerR} 0 ${largeInner} 0 ${F.x} ${F.y} A ${cornerR} ${cornerR} 0 0 1 ${G.x} ${G.y} L ${H.x} ${H.y} A ${cornerR} ${cornerR} 0 0 1 ${A.x} ${A.y} Z`;
};
const buildFullRingPath = () => {
  const outerR = import_consts2.CIRCLE_OUTER_RADIUS;
  const innerR = import_consts2.CIRCLE_INNER_RADIUS;
  return `M ${CENTER - outerR} ${CENTER} a ${outerR} ${outerR} 0 1 0 ${2 * outerR} 0 a ${outerR} ${outerR} 0 1 0 ${-2 * outerR} 0 M ${CENTER - innerR} ${CENTER} a ${innerR} ${innerR} 0 1 0 ${2 * innerR} 0 a ${innerR} ${innerR} 0 1 0 ${-2 * innerR} 0 Z`;
};
//# sourceMappingURL=circle-donut.js.map
