/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as f } from "../../chunks/runtime.js";
import { css as v, html as o } from "lit";
import { keyed as c } from "lit/directives/keyed.js";
import "@arcgis/toolkit/type";
import "../../chunks/series-types.js";
import { f as p } from "../../chunks/rest-js-object-literals.js";
import "@arcgis/toolkit/intl";
import "lodash-es";
import "luxon";
import "d3-array";
import { bS as y, d3 as u } 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 S } from "../../chunks/popover-ui-utils.js";
import { S as n } from "../../chunks/interfaces.js";
import { a as h, l as $, c as m } from "../../chunks/chart-ui-utils2.js";
import { u as b } from "../../chunks/useT9n.js";
import { createRef as d, ref as C } from "lit/directives/ref.js";
import { LitElement as P, createEvent as l, safeClassMap as a } from "@arcgis/lumina";
const r = {
  jsAppFlyout: "js-app-flyout",
  scatterplotPopover: "scatter-plot-popover",
  fillColor: "fill-color",
  header: "header",
  pickListItemLabel: "pick-list-item-label",
  pickListPanel: "pick-list-panel"
}, F = v`.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)}:host{width:100%}.pick-list-panel{max-height:60vh}`;
class L extends P {
  constructor() {
    super(...arguments), this.picklist = d(), this._messages = b(), this.popoverElement = d(), this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = l(), this.arcgisChartsConfigScatterplotFillColorChange = l(), this.arcgisChartsConfigScatterplotLineStyleChange = l(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = l(), this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange = l(), this.arcgisChartsConfigScatterplotXYFieldChange = l();
  }
  static {
    this.properties = { messageOverrides: 0, headingTitle: 1, contentKind: 1, selectedContent: 1, referenceElement: 0, placement: 1, open: 5, layerFieldsInfo: 0 };
  }
  static {
    this.styles = F;
  }
  async reposition() {
    await this.popoverElement.value?.reposition();
  }
  updated() {
    setTimeout(() => {
      this.picklist.value?.setFocus();
    }, h.PopoverTimer), S(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
      this.popoverElement.value?.reposition();
    }, h.PopoverTimer);
  }
  seriesPopoverClose() {
    this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
  }
  closePopover() {
    this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
  }
  updateSymbolProperties(e) {
    this.selectedContent = e.target.lineStyle, this.arcgisChartsConfigScatterplotLineStyleChange.emit(e.detail);
  }
  updateColorProperties(e) {
    this.selectedContent = e.detail, this.arcgisChartsConfigScatterplotFillColorChange.emit(e.detail);
  }
  onFieldSelectionChange(e) {
    const t = e.target.selectedItems;
    this.contentKind === n.sizeVariable ? this.arcgisChartsConfigScatterplotSizeVariableFieldChange.emit(t.map((i) => i.value)[0]) : this.contentKind === n.additionalTooltipFields ? this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange.emit(t.map((i) => i.value)[0]) : this.arcgisChartsConfigScatterplotXYFieldChange.emit(t.map((i) => i.value)[0]), this.open = !1;
  }
  render() {
    const e = this.selectedContent, t = this.selectedContent;
    return o`<div class=${a({ [r.jsAppFlyout]: !0 })}><calcite-popover class=${a(r.scatterplotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${$(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${C(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.fillColor} class=${a(r.fillColor)} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === p.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${!Array.isArray(e) && t?.type !== p.SLS ? this.renderVariablePickList() : null}</calcite-popover></div>`;
  }
  renderVariablePickList() {
    const e = this.layerFieldsInfo?.length ?? 0, t = [];
    (this.contentKind === n.sizeVariable || this.contentKind === n.additionalTooltipFields) && t.push(c(" ", o`<calcite-list-item label=" " value=" " .selected=${m("", this.selectedContent)}></calcite-list-item>`));
    for (let i = 0; i < e; i += 1) {
      const s = this.layerFieldsInfo?.[i] ?? void 0;
      if (s !== void 0 && (this.contentKind === n.additionalTooltipFields || y(s))) {
        const g = u(this.layerFieldsInfo, s.name);
        t.push(c(s.name, o`<calcite-list-item .label=${g} .value=${s.name} .selected=${m(s.name, this.selectedContent)}></calcite-list-item>`));
      }
    }
    return o`<calcite-panel class=${a(r.pickListPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${a(r.header)}>${this.headingTitle ?? ""}</div><calcite-list label class=${a(r.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onFieldSelectionChange} ${C(this.picklist)}>${t}</calcite-list></calcite-panel>`;
  }
}
f("arcgis-charts-config-scatter-plot-popover", L);
export {
  L as ArcgisChartsConfigScatterplotPopover
};
