/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as v } from "../../chunks/runtime.js";
import { repeat as h } from "lit/directives/repeat.js";
import { keyed as g } from "lit/directives/keyed.js";
import "@arcgis/toolkit/intl";
import { isEqual as k } from "lodash-es";
import "luxon";
import "d3-array";
import "@arcgis/toolkit/type";
import "../../chunks/series-types.js";
import { R as $ } from "../../chunks/rest-js-object-literals.js";
import { by as y, d3 as L, bU as P, bS as F } from "../../chunks/index.js";
import "@arcgis/core/Graphic.js";
import "@arcgis/core/renderers/support/jsonUtils.js";
import "@arcgis/core/symbols/support/symbolUtils.js";
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 { e as I, p as D } from "../../chunks/popover-ui-utils.js";
import { P as r } from "../../chunks/common.js";
import { P as a } from "../../chunks/interfaces.js";
import { p as u, a as x, c as p, e as S } from "../../chunks/chart-ui-utils2.js";
import { u as f } from "../../chunks/useT9n.js";
import { css as T, html as o } from "lit";
import { createRef as C, ref as d } from "lit/directives/ref.js";
import { LitElement as E, createEvent as b, safeClassMap as l } from "@arcgis/lumina";
const n = {
  jsAppFlyout: "js-app-flyout",
  name: "pie-chart-data-popover",
  numericFieldPickList: "pie-chart-data-numeric-fields-pick-list",
  header: "header",
  fab: "fab",
  pickListItemLabel: "pick-list-item-label",
  flipClass: "sort-counter-clockwise",
  panel: "panel"
}, A = T`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}.name{display:flex;flex-direction:column;margin:.5rem;padding:.5rem;background:#fff;min-width:250px}.header{margin:0;font-weight:bolder}.fab{display:flex;justify-content:stretch}.pick-list-item-label{font-size:small}.sort-icon-color{color:#000}.sort-counter-clockwise{transform:scaleX(-1)}.panel{max-height:60vh}`;
class w extends E {
  constructor() {
    super(...arguments), this._messages = f(), this.commonStrings = f({ name: "common", blocking: !0 }), this.picklist = C(), this.popoverElement = C(), this.placement = "leading", this.offsetDistance = -200, this.pickListHasChanged = !1, this.aggregationLabels = [], this.layerFieldsInfo = [], this.arcgisChartsConfigPieChartDataPopoverChange = b(), this.arcgisChartsConfigPopoverClose = b();
  }
  static {
    this.properties = { aggregationLabels: 16, messageOverrides: 0, headingTitle: 1, referenceElement: 0, open: 5, contentKind: 1, layerFieldsInfo: 0, selectedContent: 1 };
  }
  static {
    this.styles = A;
  }
  async reposition() {
    await this.popoverElement.value?.reposition();
  }
  willUpdate(e) {
    e.has("selectedContent") && this.selectedContentChange(this.selectedContent, e.get("selectedContent"));
    const t = u.map((i) => y(i, this.commonStrings));
    k(this.aggregationLabels, t) || (this.aggregationLabels = t);
  }
  updated() {
    I(this.popoverElement.value, this.open), setTimeout(() => {
      this.picklist.value?.setFocus();
    }, x.PopoverTimer);
  }
  selectedContentChange(e, t) {
    this.pickListHasChanged = D(e, t);
  }
  buildAggregationPickListItems() {
    return h(u, (e) => e, (e, t) => o`<calcite-list-item .label=${this.aggregationLabels[t]} .value=${e} .selected=${p(e, this.selectedContent)}></calcite-list-item>`);
  }
  buildSortOrder() {
    const e = Object.keys(r);
    return e.splice(e.indexOf(r.customSort), 1), h(e, (t) => t, (t) => {
      let i = "string";
      const c = "rotate";
      let s = "";
      switch (t) {
        case r.labelAsc:
          i = "string";
          break;
        case r.labelDesc:
          i = "string", s = n.flipClass;
          break;
        case r.valueAsc:
          i = "number";
          break;
        case r.valueDesc:
          i = "number", s = n.flipClass;
          break;
        // Do nothing for customSort for now
        case r.customSort:
      }
      return o`<calcite-list-item .selected=${this.selectedContent === t} .label=${this._messages[t]} .value=${r[t]}><calcite-icon slot=content-end .icon=${i}></calcite-icon><calcite-icon class=${l(s)} slot=content-end .icon=${c}></calcite-icon></calcite-list-item>`;
    });
  }
  buildPickListItem(e) {
    return g(e.name, o`<calcite-list-item .label=${L(this.layerFieldsInfo, e.name)} .value=${e.name} .selected=${p(e.name, this.selectedContent)}></calcite-list-item>`);
  }
  buildPickListItems(e) {
    const t = this.layerFieldsInfo?.length ?? 0, i = [];
    switch (e) {
      case a.numericFields: {
        for (let c = 0; c < t; c += 1) {
          const s = this.layerFieldsInfo[c];
          F(s) && i.push(this.buildPickListItem(s));
        }
        break;
      }
      case a.category: {
        const c = g(" ", o`<calcite-list-item label=" " value=" " .selected=${p("", this.selectedContent)}></calcite-list-item>`);
        i.push(c);
        for (let s = 0; s < t; s += 1) {
          const m = this.layerFieldsInfo[s];
          (P(m) || m.type === $.String) && i.push(this.buildPickListItem(m));
        }
        break;
      }
    }
    return i;
  }
  closePopover() {
    if (this.contentKind === a.numericFields && this.pickListHasChanged) {
      const e = {
        pickListElement: this.picklist.value,
        eventEmitter: this.arcgisChartsConfigPieChartDataPopoverChange,
        contentKind: this.contentKind
      };
      S(e);
    }
    this.arcgisChartsConfigPopoverClose.emit();
  }
  onDataContentTypeChange(e) {
    this.pickListHasChanged = !0;
    const t = e.target.selectedItems;
    this.arcgisChartsConfigPieChartDataPopoverChange.emit({
      contentKind: this.contentKind,
      value: t.map((i) => i.value)
    }), this.open = !1;
  }
  onNumericFieldsChange(e) {
    e.target !== null && (this.selectedContent = e.target.selectedItems.map((t) => t.value));
  }
  onNumericFieldSelectionDone() {
    this.pickListHasChanged && this.closePopover();
  }
  renderAggregationType() {
    const e = this.buildAggregationPickListItems();
    return o`<calcite-list label class=${l(n.pickListItemLabel)} selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
  }
  renderCategory() {
    const e = this.buildPickListItems(a.category);
    return o`<calcite-list label class=${l(n.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${d(this.picklist)}>${e}</calcite-list>`;
  }
  renderNumericFields() {
    const e = this.buildPickListItems(a.numericFields);
    return o`<calcite-list label class=${l(n.numericFieldPickList)} selection-mode=multiple filter-enabled @calciteListChange=${this.onNumericFieldsChange} ${d(this.picklist)}>${e}</calcite-list>`;
  }
  renderSortOrder() {
    const e = this.buildSortOrder();
    return o`<calcite-list label selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
  }
  renderPopoverInfo() {
    let e;
    switch (this.contentKind) {
      case a.aggregation:
        e = this.renderAggregationType();
        break;
      case a.category:
        e = this.renderCategory();
        break;
      case a.numericFields:
        e = this.renderNumericFields();
        break;
      case a.sortOrder:
        e = this.renderSortOrder();
        break;
    }
    return e;
  }
  render() {
    let e;
    return this.contentKind === a.numericFields && (e = o`<div slot=footer><calcite-fab class=${l(n.fab)} appearance=outline-fill kind=neutral .icon=${void 0} .label=${this._messages.selectionDone} scale=s text-enabled .text=${this._messages.selectionDone} @click=${this.onNumericFieldSelectionDone}></calcite-fab></div>`), o`<div class=${l(n.jsAppFlyout)}><calcite-popover class=${l(n.name)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .offsetDistance=${this.offsetDistance} .open=${this.open} label auto-close ${d(this.popoverElement)}><calcite-panel class=${l(n.panel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${l(n.header)}>${this.headingTitle ?? ""}</div>${this.renderPopoverInfo()}${e}</calcite-panel></calcite-popover></div>`;
  }
}
v("arcgis-charts-config-pie-chart-popover", w);
export {
  w as ArcgisChartsConfigPieChartPopover
};
