/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as k } from "../../chunks/runtime.js";
import { repeat as u } from "lit/directives/repeat.js";
import { keyed as b } from "lit/directives/keyed.js";
import "@arcgis/toolkit/type";
import { n as h, i as c } from "../../chunks/series-types.js";
import { R as F } from "../../chunks/rest-js-object-literals.js";
import "@arcgis/toolkit/intl";
import { isEqual as f } from "lodash-es";
import "luxon";
import "d3-array";
import { by as I, bz as P, d3 as T, bU as A, bS as v, bT as x, da as E } 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 D, p as S } from "../../chunks/popover-ui-utils.js";
import { LitElement as z, createEvent as C, safeClassMap as o } from "@arcgis/lumina";
import { css as N, html as n } from "lit";
import { createRef as d, ref as m } from "lit/directives/ref.js";
import { u as L } from "../../chunks/useT9n.js";
import { L as a } from "../../chunks/interfaces.js";
import { b as $, a as y, c as g, e as w, s as K } from "../../chunks/chart-ui-utils2.js";
const B = N`.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)}calcite-panel{max-height:60vh}calcite-panel .size-section{width:19rem;margin:1rem 0;display:flex;flex-wrap:wrap;justify-content:space-evenly}calcite-panel .size-section calcite-label{width:8rem;margin-bottom:.25rem}calcite-panel .apply-button{width:17rem}`, r = {
  jsAppFlyout: "js-app-flyout",
  name: "line-chart-data-popover",
  numericFieldPickList: "line-chart-data-numeric-fields-pick-list",
  header: "header",
  fab: "fab",
  pickListItemLabel: "pick-list-item-label",
  sizeSection: "size-section",
  applyButton: "apply-button"
};
class U extends z {
  constructor() {
    super(...arguments), this._messages = L(), this.commonStrings = L({ name: "common", blocking: !0 }), this.picklist = d(), this.intervalSizeElement = d(), this.intervalTypeElement = d(), this.popoverElement = d(), this.placement = "leading", this.offsetDistance = -200, this.pickListHasChanged = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigLineChartDataPopoverChange = C(), this.arcgisChartsConfigLineChartPopoverClose = C();
  }
  static {
    this.properties = { aggregationLabels: 16, timeAggregationLabels: 16, messageOverrides: 0, headingTitle: 1, referenceElement: 0, open: 5, contentKind: 1, layerFieldsInfo: 0, selectedContent: 1 };
  }
  static {
    this.styles = B;
  }
  async reposition() {
    await this.popoverElement.value?.reposition();
  }
  willUpdate(e) {
    e.has("selectedContent") && this.selectedContentChange(this.selectedContent, e.get("selectedContent"));
    const t = $.map((i) => I(i, this.commonStrings));
    f(this.aggregationLabels, t) || (this.aggregationLabels = t);
    const l = [h.Start, h.End].map((i) => P(i, this.commonStrings));
    f(this.timeAggregationLabels, l) || (this.timeAggregationLabels = l);
  }
  updated() {
    setTimeout(() => {
      typeof this.picklist.value?.setFocus == "function" && this.picklist.value?.setFocus();
    }, y.PopoverTimer), D(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
      this.popoverElement.value?.reposition();
    }, y.PopoverTimer);
  }
  selectedContentChange(e, t) {
    this.pickListHasChanged = S(e, t);
  }
  buildAggregationPickListItems() {
    return u($, (e) => e, (e, t) => n`<calcite-list-item .label=${this.aggregationLabels?.[t]} .value=${e} .selected=${g(e, this.selectedContent)}></calcite-list-item>`);
  }
  buildIntervalAlignmentPickListItems() {
    const e = [h.Start, h.End];
    return u(e, (t) => t, (t, s) => n`<calcite-list-item .label=${this.timeAggregationLabels?.[s]} .value=${t} .selected=${g(t, this.selectedContent)}></calcite-list-item>`);
  }
  buildPickListItem(e) {
    return b(e.name, n`<calcite-list-item .label=${T(this.layerFieldsInfo, e.name)} .value=${e.name} .selected=${g(e.name, this.selectedContent)}></calcite-list-item>`);
  }
  buildPickListItems(e) {
    const t = this.layerFieldsInfo?.length ?? 0, s = [];
    switch (e) {
      case a.numericFields: {
        for (let l = 0; l < t; l += 1) {
          const i = this.layerFieldsInfo?.[l];
          i && v(i) && s.push(this.buildPickListItem(i));
        }
        break;
      }
      case a.xAxisField: {
        for (let l = 0; l < t; l += 1) {
          const i = this.layerFieldsInfo?.[l];
          i && (v(i) || x(i)) && s.push(this.buildPickListItem(i));
        }
        break;
      }
      case a.splitByField: {
        const l = b(" ", n`<calcite-list-item label=" " value=" " .selected=${g("", this.selectedContent)}></calcite-list-item>`);
        s.push(l);
        for (let i = 0; i < t; i += 1) {
          const p = this.layerFieldsInfo?.[i];
          p && (A(p) || p.type === F.String) && s.push(this.buildPickListItem(p));
        }
        break;
      }
    }
    return s;
  }
  closePopover() {
    if (this.contentKind === a.numericFields) {
      const e = {
        pickListElement: this.picklist.value,
        eventEmitter: this.arcgisChartsConfigLineChartDataPopoverChange,
        contentKind: this.contentKind
      };
      w(e);
    }
    this.open = !1, this.arcgisChartsConfigLineChartPopoverClose.emit();
  }
  onDataContentTypeChange(e) {
    this.pickListHasChanged = !0;
    const t = e.target.selectedItems;
    this.arcgisChartsConfigLineChartDataPopoverChange.emit({
      contentKind: this.contentKind,
      value: t.map((s) => s.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.arcgisChartsConfigLineChartDataPopoverChange.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();
  }
  renderAggregationType() {
    const e = this.buildAggregationPickListItems();
    return n`<calcite-list label class=${o(r.pickListItemLabel)} selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
  }
  renderXAxisField() {
    const e = this.buildPickListItems(a.xAxisField);
    return n`<calcite-list label class=${o(r.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${m(this.picklist)}>${e}</calcite-list>`;
  }
  renderNumericFields() {
    const e = this.buildPickListItems(a.numericFields);
    return n`<calcite-list label class=${o(r.numericFieldPickList)} selection-mode=multiple filter-enabled @calciteListChange=${this.onNumericFieldsChange} ${m(this.picklist)}>${e}</calcite-list>`;
  }
  renderSplitByField() {
    const e = this.buildPickListItems(a.splitByField);
    return n`<calcite-list label class=${o(r.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${m(this.picklist)}>${e}</calcite-list>`;
  }
  renderIntervalAlignment() {
    const e = this.buildIntervalAlignmentPickListItems();
    return n`<calcite-list label class=${o(r.pickListItemLabel)} selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
  }
  renderInterval() {
    const e = this.selectedContent, t = [
      c.Second,
      c.Minute,
      c.Hour,
      c.Day,
      c.Week,
      c.Month,
      c.Year
    ];
    return n`<div><div class=${o(r.sizeSection)}><calcite-label scale=m>${this._messages.intervalSize}<calcite-input type=number scale=m min=1 step=any .value=${K(e?.size, 1)} ${m(this.intervalSizeElement)}></calcite-input></calcite-label><calcite-label scale=m>${this._messages.intervalType}<calcite-select .label=${this._messages.intervalType ?? ""} ${m(this.intervalTypeElement)}>${t.map((s) => n`<calcite-option .value=${s} .label=${E(s, this._messages)} .selected=${e?.unit === s}></calcite-option>`)}</calcite-select></calcite-label><calcite-button class=${o(r.applyButton)} appearance=outline @click=${this.intervalChange}>${this._messages.apply}</calcite-button></div></div>`;
  }
  renderPopoverInfo() {
    let e;
    switch (this.contentKind) {
      case a.aggregation:
        e = this.renderAggregationType();
        break;
      case a.xAxisField:
        e = this.renderXAxisField();
        break;
      case a.numericFields:
        e = this.renderNumericFields();
        break;
      case a.splitByField:
        e = this.renderSplitByField();
        break;
      case a.intervalAlignment:
        e = this.renderIntervalAlignment();
        break;
      case a.interval:
        e = this.renderInterval();
        break;
    }
    return e;
  }
  render() {
    let e;
    return this.contentKind === a.numericFields && (e = n`<div slot=footer><calcite-fab class=${o(r.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>`), n`<div class=${o(r.jsAppFlyout)}><calcite-popover class=${o(r.name)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${this.offsetDistance} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${m(this.popoverElement)}><calcite-panel closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${o(r.header)}>${this.headingTitle ?? ""}</div>${this.renderPopoverInfo()}${e}</calcite-panel></calcite-popover></div>`;
  }
}
k("arcgis-charts-config-line-chart-popover", U);
export {
  U as ArcgisChartsConfigLineChartPopover
};
