/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as y } 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 { b as s } from "../../chunks/series-types.js";
import { f as C } from "../../chunks/rest-js-object-literals.js";
import "@arcgis/toolkit/intl";
import "lodash-es";
import "luxon";
import "d3-array";
import { bS as u, d3 as b, ar 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/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 P } from "../../chunks/popover-ui-utils.js";
import { H as l } from "../../chunks/interfaces.js";
import { a as m, l as S } from "../../chunks/chart-ui-utils2.js";
import { u as T } from "../../chunks/useT9n.js";
import { createRef as h, ref as d } from "lit/directives/ref.js";
import { LitElement as k, createEvent as p, safeClassMap as t } from "@arcgis/lumina";
const i = {
  symbolPropertyPopover: "symbol-property-popover",
  colorPicker: "color-picker",
  jsAppFlyout: "js-app-flyout",
  header: "header",
  pickListItemLabel: "pick-list-item-label",
  fieldSelectPanel: "field-select-panel",
  transformationPanel: "transformation-panel"
}, L = 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)}.right{display:block;text-align:right}.inline{display:inline-flex;flex-wrap:wrap}.symbol-property-popover{min-width:300px}.symbol-property-popover .inline{align-items:center;margin-bottom:1rem;padding:0 1rem}.symbol-property-popover .inline calcite-action{margin-left:.2rem}.symbol-property-popover .inline input,.symbol-property-popover .inline select{width:4rem;margin-left:.5rem;height:24px}.symbol-property-popover .inline select{width:6rem}.symbol-property-popover .color calcite-icon{margin-left:.5rem}.symbol-property-popover .color .color-picker{padding:1rem}.header{margin:0;font-weight:bolder}.pick-list-item-label{font-size:small}.field-select-panel{max-height:60vh}.transformation-panel{width:calc(var(--calcite-panel-width-multiplier) * 12vw);max-width:calc(var(--calcite-panel-width-multiplier) * 300px);min-width:calc(var(--calcite-panel-width-multiplier) * 150px);min-width:calc(var(--calcite-panel-width-multiplier) * 170px)}`;
class F extends k {
  constructor() {
    super(...arguments), this._messages = T(), this.picklist = h(), this.popoverElement = h(), this.layerFieldsInfo = [], this.arcgisChartsConfigHistogramPopoverChange = p(), this.arcgisChartsConfigHistogramPopoverSymbolChange = p(), this.arcgisChartsConfigPopoverClose = p();
  }
  static {
    this.properties = { messageOverrides: 0, layerFieldsInfo: 0, headingTitle: 1, selectedNumericField: 1, selectedTransformationType: 1, selectedOverlaySymbol: 0, selectedBinColor: 0, referenceElement: 0, contentKind: 1, placement: 1, open: 5, selectedOverlaySymbolType: 1 };
  }
  static {
    this.styles = L;
  }
  async reposition() {
    await this.popoverElement.value?.reposition();
  }
  updated() {
    setTimeout(() => {
      this.picklist.value?.setFocus();
    }, m.PopoverTimer), P(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
      this.popoverElement.value?.reposition();
    }, m.PopoverTimer);
  }
  buildPickListItems(e) {
    const n = [];
    if (e === l.numericFields)
      for (let r = 0; r < this.layerFieldsInfo?.length; r += 1) {
        const a = this.layerFieldsInfo[r];
        u(a) && n.push(c(a.name, o`<calcite-list-item .label=${b(this.layerFieldsInfo, a.name)} .value=${a.name} .selected=${this.selectedNumericField === a.name}></calcite-list-item>`));
      }
    else {
      const r = [
        c(s.None, o`<calcite-list-item .label=${this._messages.none} .value=${s.None} .selected=${this.selectedTransformationType === s.None}></calcite-list-item>`),
        c(s.Log, o`<calcite-list-item .label=${this._messages.log} .value=${s.Log} .selected=${this.selectedTransformationType === s.Log}></calcite-list-item>`),
        c(s.Sqrt, o`<calcite-list-item .label=${this._messages.sqRt} .value=${s.Sqrt} .selected=${this.selectedTransformationType === s.Sqrt}></calcite-list-item>`)
      ];
      n.push(...r);
    }
    return n;
  }
  getPopoverClass() {
    return this.contentKind === l.fillSymbol || this.contentKind === l.lineSymbol ? i.symbolPropertyPopover : "";
  }
  closePopover() {
    (this.open || this.popoverElement.value?.open === !1) && (this.open = !1, this.arcgisChartsConfigPopoverClose.emit());
  }
  overlaySymbolChange(e) {
    this.arcgisChartsConfigHistogramPopoverSymbolChange.emit(e.detail);
  }
  fillColorChange(e) {
    const n = e.detail, [r, a, g] = n, f = $ * 255;
    this.arcgisChartsConfigHistogramPopoverSymbolChange.emit({
      type: C.SFS,
      color: [r, a, g, f]
    });
  }
  onPickListChange(e) {
    e.target !== null && (this.arcgisChartsConfigHistogramPopoverChange.emit({
      contentKind: this.contentKind,
      value: e.target.selectedItems[0].value
    }), this.open = !1);
  }
  renderFillColor() {
    return o`<arcgis-charts-config-color-style class=${t(i.colorPicker)} .header=${this.headingTitle ?? this._messages.fillColor} enable-close .open=${this.open} .selectedColor=${this.selectedBinColor?.color} @arcgisChartsConfigColorStyleChange=${this.fillColorChange} @arcgisChartsConfigColorStyleClose=${this.closePopover}></arcgis-charts-config-color-style>`;
  }
  renderOverlayStyle() {
    return o`<arcgis-charts-config-line-style class=${t(i.colorPicker)} .open=${this.open} enable-close .header=${this.headingTitle ?? this._messages.lineStyle} .lineStyle=${this.selectedOverlaySymbol} @arcgisChartsConfigLineStyleClose=${this.closePopover} @arcgisChartsConfigLineStyleChange=${this.overlaySymbolChange}></arcgis-charts-config-line-style>`;
  }
  renderFieldSelect() {
    const e = this.buildPickListItems(l.numericFields);
    return o`<calcite-panel class=${t(i.fieldSelectPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${t(i.header)}>${this._messages.numericalFieldHeader}</div><calcite-list label selection-mode=single selection-appearance=border class=${t(i.pickListItemLabel)} filter-enabled @calciteListChange=${this.onPickListChange} ${d(this.picklist)}>${e}</calcite-list></calcite-panel>`;
  }
  renderTransformationSelect() {
    const e = this.buildPickListItems(l.transformation);
    return o`<calcite-panel class=${t(i.transformationPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${t(i.header)}>${this._messages.transformationHeader}</div><calcite-list label selection-mode=single selection-appearance=border class=${t(i.pickListItemLabel)} @calciteListChange=${this.onPickListChange}>${e}</calcite-list></calcite-panel>`;
  }
  render() {
    return o`<div class=${t({ [i.jsAppFlyout]: !0 })}><calcite-popover class=${t(this.getPopoverClass())} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} @calcitePopoverClose=${this.closePopover} .open=${this.open} .offsetDistance=${S(this.placement)} label auto-close ${d(this.popoverElement)}>${this.renderContentType()}</calcite-popover></div>`;
  }
  renderContentType() {
    switch (this.contentKind) {
      case l.fillSymbol:
        return this.renderFillColor();
      case l.lineSymbol:
        return this.renderOverlayStyle();
      case l.numericFields:
        return this.renderFieldSelect();
      case l.transformation:
        return this.renderTransformationSelect();
      default:
        return;
    }
  }
}
y("arcgis-charts-config-histogram-popover", F);
export {
  F as ArcgisChartsConfigHistogramPopover
};
