/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as S } from "../../chunks/runtime.js";
import { repeat as b } from "lit/directives/repeat.js";
import { keyed as f } from "lit/directives/keyed.js";
import "@arcgis/toolkit/type";
import { n as g, a as T, i as p } from "../../chunks/series-types.js";
import { R as y } from "../../chunks/rest-js-object-literals.js";
import { LitElement as F, createEvent as $, renderElement as P, safeStyleMap as A, safeClassMap as r } from "@arcgis/lumina";
import { substitute as D } from "@arcgis/core/intl.js";
import { css as x, html as a } from "lit";
import { createRef as u, ref as d } from "lit/directives/ref.js";
import { isEqual as L } from "lodash-es";
import { u as k } from "../../chunks/useT9n.js";
import { B as n } from "../../chunks/interfaces.js";
import { S as m } from "../../chunks/common.js";
import "@arcgis/toolkit/intl";
import "luxon";
import "d3-array";
import { by as E, bz as z, cU as N, d3 as w, bU as I, bT as B, bS as K, da as _ } 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/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 { e as U, p as H } from "../../chunks/popover-ui-utils.js";
import { b as v, a as C, c as h, d as j, e as M, s as O } from "../../chunks/chart-ui-utils2.js";
const W = x`.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-y-axis{transform:rotate(90deg)}.sort-order-pick-list{overflow-y:hidden}.panel{max-height:60vh}.panel .size-section{width:19rem;margin:1rem 0;display:flex;flex-wrap:wrap;justify-content:space-evenly}.panel .size-section calcite-label{width:8rem;margin-bottom:.25rem}.panel .apply-button{width:17rem}`, o = {
  jsAppFlyout: "js-app-flyout",
  name: "bar-chart-data-popover",
  numericFieldPickList: "bar-chart-data-numeric-fields-pick-list",
  header: "header",
  fab: "fab",
  pickListItemLabel: "pick-list-item-label",
  rotateClass: "sort-y-axis",
  sortOrderPickList: "sort-order-pick-list",
  sizeSection: "size-section",
  applyButton: "apply-button",
  panel: "panel"
};
class R extends F {
  constructor() {
    super(...arguments), this._messages = k(), this.commonStrings = k({ name: "common", blocking: !0 }), this.picklist = u(), this.intervalSizeElement = u(), this.intervalTypeElement = u(), this.popoverElement = u(), this.placement = "leading", this.offsetDistance = -200, this.pickListHasChanged = !1, this.aggregationLabels = [], this.layerFieldsInfo = [], this.isCustomSortDisabled = !1, this.isNoAggregationDisabled = !1, this.arcgisChartsConfigBarChartDataPopoverChange = $(), this.arcgisChartsConfigPopoverClose = $();
  }
  static {
    this.properties = { aggregationLabels: 16, timeAggregationLabels: 16, messageOverrides: 0, headingTitle: 1, referenceElement: 0, open: 5, contentKind: 1, layerFieldsInfo: 0, selectedContent: 1, isCustomSortDisabled: 5, isNoAggregationDisabled: 5 };
  }
  static {
    this.styles = W;
  }
  async reposition() {
    await this.popoverElement.value?.reposition();
  }
  willUpdate(e) {
    e.has("selectedContent") && this.selectedContentChange(this.selectedContent, e.get("selectedContent"));
    const t = v.map((s) => E(s, this.commonStrings));
    L(this.aggregationLabels, t) || (this.aggregationLabels = t);
    const l = [g.Start, g.End].map((s) => z(s, this.commonStrings));
    L(this.timeAggregationLabels, l) || (this.timeAggregationLabels = l);
  }
  updated() {
    setTimeout(() => {
      this.picklist.value?.setFocus();
    }, C.PopoverTimer), U(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
      this.popoverElement.value?.reposition();
    }, C.PopoverTimer);
  }
  selectedContentChange(e, t) {
    this.pickListHasChanged = H(e, t);
  }
  buildAggregationListItems() {
    const e = this.isNoAggregationDisabled ? v.filter((t) => t !== T.NoAggregation) : v;
    return b(e, (t) => t, (t, i) => a`<calcite-list-item .label=${this.aggregationLabels[i]} .value=${t} .selected=${h(t, this.selectedContent)}></calcite-list-item>`);
  }
  createTooltip(e) {
    if (e.target?.label === this._messages.customSort && this.isCustomSortDisabled) {
      const t = e.target, i = N(t), s = new Intl.NumberFormat(i).format(C.customSortLimit), c = D(this._messages.customSortLimit ?? "", {
        totalLimit: s
      });
      this.tooltip = P(a`<calcite-tooltip style=${A({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${t} open placement=top>${c}</calcite-tooltip>`), document.body.appendChild(this.tooltip);
    }
  }
  destroyTooltip() {
    j(this.tooltip);
  }
  buildSortOrder() {
    const e = Object.keys(m);
    let t;
    return b(e, (i) => i, (i) => {
      let l = "";
      switch (i) {
        case m.xAxisAsc: {
          t = "a-z-down";
          break;
        }
        case m.xAxisDesc: {
          t = "a-z-up";
          break;
        }
        case m.yAxisAsc: {
          t = "sort-descending", l = o.rotateClass;
          break;
        }
        case m.yAxisDesc: {
          t = "sort-ascending", l = o.rotateClass;
          break;
        }
        case m.customSort: {
          t = "arrow-up-down";
          break;
        }
      }
      return a`<calcite-list-item .disabled=${this.isCustomSortDisabled && i === m.customSort} .label=${this._messages[i]} .selected=${this.selectedContent === i} .value=${m[i]} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}><calcite-icon class=${`sort-icon-color ${l}`} slot=content-start .icon=${t}></calcite-icon></calcite-list-item>`;
    });
  }
  buildPickListItem(e) {
    return f(e.name, a`<calcite-list-item .label=${w(this.layerFieldsInfo, e.name)} .value=${e.name} .selected=${h(e.name, this.selectedContent)}></calcite-list-item>`);
  }
  buildPickListItems(e) {
    const t = this.layerFieldsInfo?.length ?? 0, i = [];
    switch (e) {
      case n.numericFields: {
        for (let l = 0; l < t; l += 1) {
          const s = this.layerFieldsInfo?.[l];
          s && K(s) && i.push(this.buildPickListItem(s));
        }
        break;
      }
      case n.category: {
        const l = f(" ", a`<calcite-list-item label=" " value=" " .selected=${h("", this.selectedContent)}></calcite-list-item>`);
        i.push(l);
        for (let s = 0; s < t; s += 1) {
          const c = this.layerFieldsInfo?.[s];
          c && (c.type === y.String || I(c) || B(c)) && i.push(this.buildPickListItem(c));
        }
        break;
      }
      case n.splitByField: {
        const l = f(" ", a`<calcite-list-item label=" " value=" " .selected=${h("", this.selectedContent)}></calcite-list-item>`);
        i.push(l);
        for (let s = 0; s < t; s += 1) {
          const c = this.layerFieldsInfo?.[s];
          c && (I(c) || c.type === y.String) && i.push(this.buildPickListItem(c));
        }
        break;
      }
    }
    return i;
  }
  closePopover() {
    if (this.contentKind === n.numericFields && this.pickListHasChanged) {
      const e = {
        pickListElement: this.picklist.value,
        eventEmitter: this.arcgisChartsConfigBarChartDataPopoverChange,
        contentKind: this.contentKind
      };
      M(e);
    }
    this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
  }
  onDataContentTypeChange(e) {
    const t = e.target.selectedItems;
    this.arcgisChartsConfigBarChartDataPopoverChange.emit({
      contentKind: this.contentKind,
      value: t.map((i) => i.value)
    }), this.open = !1;
  }
  intervalChange() {
    const e = Number.parseInt(this.intervalSizeElement.value?.value ?? ""), t = this.intervalTypeElement.value?.selectedOption?.value;
    !Number.isNaN(e) && e > 0 && this.arcgisChartsConfigBarChartDataPopoverChange.emit({
      contentKind: this.contentKind,
      value: [{ intervalSize: e, intervalUnits: t }]
    }), this.open = !1;
  }
  onNumericFieldsChange(e) {
    e.target !== null && (this.selectedContent = e.target.selectedItems.map((t) => t.value));
  }
  onNumericFieldSelectionDone() {
    this.pickListHasChanged && this.closePopover();
  }
  buildIntervalAlignmentPickListItems() {
    const e = [g.Start, g.End];
    return b(e, (t) => t, (t, i) => a`<calcite-list-item .label=${this.timeAggregationLabels?.[i]} .value=${t} .selected=${h(t, this.selectedContent)}></calcite-list-item>`);
  }
  renderAggregationType() {
    const e = this.buildAggregationListItems();
    return a`<calcite-list label class=${r(o.pickListItemLabel)} selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
  }
  renderCategory() {
    const e = this.buildPickListItems(n.category);
    return a`<calcite-list label class=${r(o.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${d(this.picklist)}>${e}</calcite-list>`;
  }
  renderNumericFields() {
    const e = this.buildPickListItems(n.numericFields);
    return a`<calcite-list label class=${r(o.numericFieldPickList)} selection-mode=multiple filter-enabled @calciteListChange=${this.onNumericFieldsChange} ${d(this.picklist)}>${e}</calcite-list>`;
  }
  renderSortOrder() {
    const e = this.buildSortOrder();
    return a`<calcite-list label class=${r(o.sortOrderPickList)} selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
  }
  renderSplitByField() {
    const e = this.buildPickListItems(n.splitByField);
    return a`<calcite-list label class=${r(o.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${d(this.picklist)}>${e}</calcite-list>`;
  }
  renderIntervalAlignment() {
    const e = this.buildIntervalAlignmentPickListItems();
    return a`<calcite-list label class=${r(o.pickListItemLabel)} selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
  }
  renderInterval() {
    const e = this.selectedContent, t = [
      p.Second,
      p.Minute,
      p.Hour,
      p.Day,
      p.Week,
      p.Month,
      p.Year
    ];
    return a`<div><div class=${r(o.sizeSection)}><calcite-label scale=m>${this._messages.intervalSize}<calcite-input type=number scale=m min=1 step=any .value=${O(e?.size, 1)} ${d(this.intervalSizeElement)}></calcite-input></calcite-label><calcite-label scale=m>${this._messages.intervalType}<calcite-select .label=${this._messages.intervalType ?? ""} ${d(this.intervalTypeElement)}>${t.map((i) => a`<calcite-option .value=${i} .label=${_(i, this._messages)} .selected=${e?.unit === i}></calcite-option>`)}</calcite-select></calcite-label><calcite-button class=${r(o.applyButton)} appearance=outline @click=${this.intervalChange}>${this._messages.apply}</calcite-button></div></div>`;
  }
  renderPopoverInfo() {
    let e;
    switch (this.contentKind) {
      case n.aggregation:
        e = this.renderAggregationType();
        break;
      case n.category:
        e = this.renderCategory();
        break;
      case n.numericFields:
        e = this.renderNumericFields();
        break;
      case n.splitByField:
        e = this.renderSplitByField();
        break;
      case n.sortOrder:
        e = this.renderSortOrder();
        break;
      case n.intervalAlignment:
        e = this.renderIntervalAlignment();
        break;
      case n.interval:
        e = this.renderInterval();
        break;
    }
    return e;
  }
  render() {
    let e;
    return this.contentKind === n.numericFields && (e = a`<div slot=footer><calcite-fab class=${r(o.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>`), a`<div class=${r(o.jsAppFlyout)}><calcite-popover class=${r(o.name)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${this.offsetDistance} .open=${this.open} @calcitePopoverClose=${this.closePopover} label auto-close ${d(this.popoverElement)}><calcite-panel class=${r(o.panel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${r(o.header)}>${this.headingTitle ?? ""}</div>${this.renderPopoverInfo()}${e}</calcite-panel></calcite-popover></div>`;
  }
}
S("arcgis-charts-config-bar-chart-popover", R);
export {
  R as ArcgisChartsConfigBarChartPopover
};
