/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as T } from "../../chunks/runtime.js";
import { keyed as f } from "lit/directives/keyed.js";
import { b as h } from "../../chunks/common.js";
import "@arcgis/toolkit/type";
import "../../chunks/series-types.js";
import { f as E } from "../../chunks/rest-js-object-literals.js";
import "@arcgis/toolkit/intl";
import { debounce as C, isEmpty as x, toNumber as N } from "lodash-es";
import "luxon";
import "d3-array";
import { bC as $, ax as S } from "../../chunks/index.js";
import "@arcgis/core/Graphic.js";
import "@arcgis/core/renderers/support/jsonUtils.js";
import "@arcgis/core/symbols/support/symbolUtils.js";
import "@esri/arcgis-html-sanitizer";
import "@arcgis/core/intl.js";
import "@arcgis/core/layers/support/FeatureFilter.js";
import "@arcgis/core/smartMapping/statistics/histogram.js";
import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
import "simple-statistics";
import "@arcgis/core/request.js";
import "@arcgis/core/core/sql.js";
import "@arcgis/core/AttributeBinsGraphic.js";
import "@arcgis/core/geometry/support/jsonUtils.js";
import "@arcgis/core/rest/support/AttributeBinsQuery.js";
import "@arcgis/core/rest/support/StatisticDefinition.js";
import "@arcgis/core/time/TimeExtent.js";
import "@arcgis/core/core/promiseUtils.js";
import "@arcgis/toolkit/dom";
import { r as I } from "../../chunks/popover-ui-utils.js";
import { a as y, d as G, s as g } from "../../chunks/chart-ui-utils2.js";
import { u as _ } from "../../chunks/useT9n.js";
import { css as w, html as d } from "lit";
import { createRef as m, ref as p } from "lit/directives/ref.js";
import { LitElement as M, renderElement as P, safeStyleMap as u, safeClassMap as s } from "@arcgis/lumina";
const o = {
  sectionLabel: "section-label",
  label: "label",
  sliceList: "slice-list",
  radioGroup: "radio-group",
  pieDonutLabelsContainer: "pie-donut-labels-container",
  sliderInputContainer: "slider-input-container",
  groupingLabelContainer: "grouping-label-container",
  numberInput: "number-input"
}, z = w`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.section-label{display:flex;margin:var(--arcgis-charts-config-margin-major) var(--arcgis-charts-config-margin-minor);justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}.label{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.label .grouping-label-container{display:flex;justify-content:space-between}.label .slider-input-container{display:flex}.label .slider-input-container calcite-slider{--calcite-label-margin-bottom: var(--arcgis-charts-intra-section-margin) !important;margin-right:var(--arcgis-charts-config-margin-minor);flex-grow:1}.label .slider-input-container .number-input{width:8rem}.slice-list{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-major)}.radio-group{margin-top:var(--arcgis-charts-config-margin-minor)}.pie-donut-labels-container{display:flex;justify-content:space-between;margin-top:calc(var(--arcgis-charts-config-margin-minor) * -3)}`;
class k extends M {
  constructor() {
    super(...arguments), this._messages = _(), this.slicesPopover = null, this.donutSizeSliderElement = m(), this.groupingThresholdElement = m(), this.groupingThresholdSliderElement = m(), this.labelCharacterLimitElement = m(), this.decimalPlacesElement = m(), this.open = !1, this.onDonutSizeSliderChange = C(() => {
      this.donutSizeSliderElement.value && Number.isInteger(this.donutSizeSliderElement.value?.value) && (this.model.innerRadiusSize = this.donutSizeSliderElement.value.value ?? $);
    }, y.SliderTimer), this.onGroupingThresholdSliderChange = C(() => {
      const e = this.groupingThresholdSliderElement.value?.value;
      e !== void 0 && !Number.isNaN(e) ? (this.groupingThresholdElement?.value && (this.groupingThresholdElement.value.value = e.toString()), this.groupingThresholdSliderElement.value && (this.groupingThresholdSliderElement.value.value = e), this.model.groupingThreshold = e) : this.model.groupingThreshold = 0;
    }, y.SliderTimer), this.sliceNameChange = (e) => {
      if (e.detail !== null || e.detail !== void 0) {
        const l = e.detail?.name, i = this.model.slices?.findIndex((r) => r.sliceId === this.selectedSliceId), t = this.model.sliceGrouping;
        i != null && i >= 0 ? this.model.setSliceName(l, i) : t?.sliceId === this.selectedSliceId && t !== void 0 && (this.model.sliceGrouping = {
          ...t,
          label: l
        });
      }
    }, this.sliceColorChange = (e) => {
      if (e.detail !== null && e.detail !== void 0) {
        const { color: l } = e.detail, i = this.model.slices?.findIndex((r) => r.sliceId === this.selectedSliceId), t = this.model.sliceGrouping;
        i != null && i >= 0 ? (this.model.colorMatch = !1, this.model.setSliceColor(l, i)) : t?.sliceId === this.selectedSliceId && t !== void 0 && (this.model.colorMatch = !1, this.model.sliceGrouping = {
          ...t,
          fillSymbol: {
            ...t.fillSymbol,
            type: E.SFS,
            color: l
          }
        });
      }
    }, this.slicesPopoverClose = (e) => {
      const { selectedSliceId: l } = e.detail;
      l === this.selectedSliceId && (this.selectedSliceId = void 0, this.slicesPopover = I(this.slicesPopover));
    }, this.onModelConfigChange = () => {
      this.requestUpdate();
    }, this.popoverPlacement = "leading";
  }
  static {
    this.properties = { selectedSliceId: 16, messageOverrides: 0, model: 0, popoverPlacement: 1, chartData: 0 };
  }
  static {
    this.styles = z;
  }
  load() {
    this.modelChange(this.model), this.onModelConfigChange();
  }
  willUpdate(e) {
    e.has("model") && this.modelChange(this.model, e.get("model")), e.has("selectedSliceId") && this.selectedSliceIdChange();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.removeSlicesPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
  }
  modelChange(e, l) {
    l?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
  }
  selectedSliceIdChange() {
    if (!x(this.selectedSliceId)) {
      const e = this.model.slices, l = this.model.sliceGrouping;
      let i, t;
      if (this.selectedSliceId === l?.sliceId)
        i = l?.label, t = l?.fillSymbol?.color;
      else if (e !== void 0) {
        const r = e.findIndex((n) => n.sliceId === this.selectedSliceId);
        i = this.model.getSliceName(r), t = this.model.getSliceColor(r);
      }
      this.slicesPopover = P(d`<arcgis-charts-config-pie-chart-slices-popover .referenceElement=${this.el} .placement=${this.popoverPlacement} .open=${this.open} .selectedSliceId=${this.selectedSliceId} .selectedName=${i} .selectedColor=${t} @arcgisChartsConfigSlicesPopoverColorChange=${this.sliceColorChange} @arcgisChartsConfigSlicesPopoverNameChange=${this.sliceNameChange} @arcgisChartsConfigPopoverClose=${this.slicesPopoverClose}></arcgis-charts-config-pie-chart-slices-popover>`), this.slicesPopover && !document.body.contains(this.slicesPopover) && document.body.appendChild(this.slicesPopover);
    }
  }
  removeSlicesPopover() {
    this.slicesPopover !== void 0 && this.slicesPopover !== null && (this.slicesPopover.open = !1, this.slicesPopover.selectedName = void 0, this.slicesPopover.selectedColor = void 0, this.slicesPopover = I(this.slicesPopover));
  }
  buildSliceListItem() {
    let e = "#CCCCCC", l = "minus-square";
    const i = [];
    let t = this.model.slices;
    const r = this.chartData?.dataItems;
    r && (t = t?.filter((a) => r?.findIndex((c) => c.arcgis_charts_slice_id === a.sliceId) !== -1)), t?.forEach((a) => {
      if (a.fillSymbol?.color !== void 0) {
        l = "square-f";
        const [c, b, v, L] = [...a.fillSymbol.color];
        e = `rgba(${c},${b},${v},${L / 255})`;
      }
      if (a !== void 0 && !this.model.groupedSliceIds.includes(a.sliceId)) {
        let c = a.sliceId;
        c === S.emptySliceId ? c = this._messages.emptySlice ?? "" : c === S.nullSliceId && (c = this._messages.nullSlice ?? ""), i?.push(f(a.sliceId, d`<calcite-list-item .label=${a.label ?? a.sliceId} .description=${c} .value=${a.sliceId} .selected=${this.selectedSliceId === a.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
      }
    });
    const n = this.model.sliceGrouping;
    if (n?.fillSymbol?.color !== void 0) {
      l = "square-f";
      const [a, c, b, v] = [...n.fillSymbol.color];
      e = `rgba(${a},${c},${b},${v / 255})`;
    }
    return this.model.groupedSliceIds.length > 0 && i?.push(f(n?.sliceId, d`<calcite-list-item .label=${n?.label ?? n?.sliceId ?? ""} .description=${this._messages.groupedSlices} .value=${n?.sliceId ?? ""} .selected=${this.selectedSliceId === n?.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`)), i;
  }
  buildGroupedSlicesListItem() {
    let e = "#CCCCCC", l = "minus-square";
    const i = [];
    return this.model.slices?.forEach((t) => {
      if (t.fillSymbol?.color !== void 0) {
        l = "square-f";
        const [r, n, a, c] = [...t.fillSymbol.color];
        e = `rgba(${r},${n},${a},${c / 255})`;
      }
      t !== void 0 && this.model.groupedSliceIds.includes(t.sliceId) && i?.push(f(t.sliceId, d`<calcite-list-item .label=${t.label ?? t.sliceId} .description=${t.sliceId} .value=${t.sliceId} .selected=${this.selectedSliceId === t.sliceId} @click=${this.openSlicesPopover}><calcite-icon slot=content-end .icon=${l} style=${u({ color: e })}></calcite-icon></calcite-list-item>`));
    }), i;
  }
  buildSliceList() {
    return d`<calcite-list label class=${s(o.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSliceListItem()}</calcite-list>`;
  }
  buildGroupedSliceList() {
    return d`<calcite-list label class=${s(o.sliceList)} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildGroupedSlicesListItem()}</calcite-list>`;
  }
  onGroupingThresholdChange(e) {
    const l = e.target.value;
    let i = Number.parseInt(l);
    i > 100 ? i = 100 : i < 0 && (i = 0), Number.isNaN(i) ? this.model.groupingThreshold = 0 : (this.groupingThresholdElement?.value && (this.groupingThresholdElement.value.value = i.toString()), this.model.groupingThreshold = i, this.groupingThresholdSliderElement.value && (this.groupingThresholdSliderElement.value.value = i));
  }
  onLabelCharacterLimitChange(e) {
    const l = e.target.value;
    let i = Number.parseInt(l);
    i < 1 && (i = 1), Number.isNaN(i) ? this.model.labelCharacterLimit = null : (this.labelCharacterLimitElement.value && (this.labelCharacterLimitElement.value.value = i.toString()), this.model.labelCharacterLimit = i);
  }
  onDecimalPlacesChange(e) {
    const l = e.target.value;
    let i = Number.parseInt(l);
    i < 0 ? i = 0 : i > 20 && (i = 20), Number.isNaN(i) ? this.model.decimalPlaces = 0 : (this.decimalPlacesElement.value && (this.decimalPlacesElement.value.value = i.toString()), this.model.decimalPlaces = i);
  }
  onDisplayTypeChange(e) {
    const l = e.target.selectedItem;
    this.model.displayType = l.value;
  }
  resetSlicesOriginal() {
    this.selectedSliceId = void 0, this.model.colorMatch = !0, this.model.resetSlices();
  }
  onCalciteListOrderChange(e) {
    if (e.detail !== null && e.detail !== void 0) {
      const { newIndex: l, oldIndex: i } = e.detail;
      this.model.moveSeries(i, l);
    }
  }
  openSlicesPopover(e) {
    e.stopImmediatePropagation(), this.removeSlicesPopover();
    const l = e.target, i = l.localName === "calcite-list-item" ? l : l.parentNode;
    i.value === this.model.sliceGrouping?.sliceId ? this.selectedSliceId = this.model.sliceGrouping?.sliceId : this.selectedSliceId = i.value, this.open = !0;
  }
  createTooltip(e) {
    const l = e.target;
    this.tooltip = P(d`<calcite-tooltip style=${u({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${l} open placement=top .innerHTML=${this._messages.groupingInfo ?? "" ?? ""}></calcite-tooltip>`), document.body.appendChild(this.tooltip);
  }
  destroyTooltip() {
    G(this.tooltip);
  }
  render() {
    return d`<div class=${s(o.sectionLabel)}>${this._messages.settings}</div><calcite-label class=${s(o.label)}>${this._messages.shape}<calcite-slider min=0 max=100 step=1 snap .value=${this.model.innerRadiusSize ?? $} @calciteSliderChange=${this.onDonutSizeSliderChange} ${p(this.donutSizeSliderElement)}></calcite-slider></calcite-label><div class=${s(o.pieDonutLabelsContainer)}><calcite-label class=${s(o.label)}>${this._messages.pie}</calcite-label><calcite-label class=${s(o.label)}>${this._messages.donut}</calcite-label></div><calcite-label class=${s(o.label)}><div class=${s(o.groupingLabelContainer)}><div>${this._messages.groupingPercent}</div><calcite-icon icon=information scale=s flip-rtl @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-icon></div><div class=${s(o.sliderInputContainer)}><calcite-slider min=0 max=50 step=1 snap .value=${N(g(this.model.groupingThreshold ?? 0))} @calciteSliderChange=${this.onGroupingThresholdSliderChange} ${p(this.groupingThresholdSliderElement)}></calcite-slider><calcite-input class=${s(o.numberInput)} type=number min=0 max=100 step=1 suffix-text=% .value=${g(this.model.groupingThreshold ?? 0)} @calciteInputInput=${this.onGroupingThresholdChange} @click=${(e) => {
      e.stopPropagation();
    }} ${p(this.groupingThresholdElement)}></calcite-input></div></calcite-label><div class=${s(o.sectionLabel)}>${this._messages.labels}</div><calcite-label class=${s(o.label)}>${this._messages.labelCharacterLimit}<calcite-input type=number min=1 step=1 .value=${g(this.model.labelCharacterLimit)} @calciteInputInput=${this.onLabelCharacterLimitChange} ${p(this.labelCharacterLimitElement)}></calcite-input></calcite-label><calcite-label class=${s(o.label)}>${this._messages.decimalPlaces}<calcite-input type=number min=0 max=20 step=1 .value=${g(this.model.decimalPlaces)} @calciteInputInput=${this.onDecimalPlacesChange} ${p(this.decimalPlacesElement)}></calcite-input></calcite-label><calcite-label class=${s(o.label)}>${this._messages.display}<calcite-radio-button-group class=${s(o.radioGroup)} name=display layout=vertical @calciteRadioButtonGroupChange=${this.onDisplayTypeChange}><calcite-label layout=inline><calcite-radio-button .value=${h.Value} .checked=${this.model.displayType === h.Value}></calcite-radio-button>${this._messages.value}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${h.Percentage} .checked=${this.model.displayType === h.Percentage}></calcite-radio-button>${this._messages.percentage}</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${h.Both} .checked=${this.model.displayType === h.Both}></calcite-radio-button>${this._messages.both}</calcite-label></calcite-radio-button-group></calcite-label><div class=${s(o.sectionLabel)}>${this._messages.slices}<calcite-button @click=${this.resetSlicesOriginal} .disabled=${!this.model.resetAvailable()} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${this.buildSliceList()}<div class=${s(o.sectionLabel)}>${this._messages.groupedSlices}</div>${this.buildGroupedSliceList()}`;
  }
}
T("arcgis-charts-config-pie-chart-slices", k);
export {
  k as ArcgisChartsConfigPieChartSlices
};
