/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as k } from "../../chunks/runtime.js";
import { keyed as y } from "lit/directives/keyed.js";
import "@arcgis/toolkit/intl";
import { debounce as f } from "lodash-es";
import "luxon";
import "d3-array";
import "@arcgis/toolkit/type";
import { b as u } from "../../chunks/series-types.js";
import { f as I } from "../../chunks/rest-js-object-literals.js";
import { d3 as L, aM as V, aK as T } 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 { r as P } from "../../chunks/popover-ui-utils.js";
import { H as m, e as a, b as d } from "../../chunks/interfaces.js";
import { i as x, m as C, a as S, k as N, s as F, U as D, D as B } from "../../chunks/chart-ui-utils2.js";
import { d as _, s as H } from "../../chunks/store.js";
import { u as K } from "../../chunks/useT9n.js";
import { css as A, html as r } from "lit";
import { createRef as b, ref as v } from "lit/directives/ref.js";
import { LitElement as U, createEvent as $, renderElement as z, safeStyleMap as O, safeClassMap as s } from "@arcgis/lumina";
const o = {
  label: "label",
  row: "row",
  binCountContainer: "bin-count-container",
  iconSelect: "icon-select",
  sectionLabel: "section-label",
  binTextPadding: "bin-text-padding",
  histogramStatsList: "histogram-stats-list"
}, j = A`.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{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}calcite-list-item{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor)}.label{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.text{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);width:calc(100% - 1.5rem);height:2rem;margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.row{padding-top:1rem}.bin-count-container{display:flex;flex-wrap:wrap;padding:var(--arcgis-charts-config-margin-minor)}.bin-count-container>calcite-slider{flex-grow:10;min-width:50%}.bin-count-container>calcite-input{margin-bottom:.5rem;margin-top:var(--arcgis-charts-config-margin-minor);margin-left:var(--arcgis-charts-config-margin-minor);width:5rem}.section-label{display:flex;margin:var(--arcgis-charts-config-margin-major) var(--arcgis-charts-config-margin-minor);justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}.bin-text-padding{margin-left:var(--arcgis-charts-config-margin-minor)}.histogram-stats-list{pointer-events:none;margin-bottom:var(--arcgis-charts-config-margin-minor)}`;
class q extends U {
  constructor() {
    super(...arguments), this._messages = K(), this.numericalFieldSelectionElement = b(), this.transformationSelectionElement = b(), this.histogramPopover = null, this.binColorSectionElement = b(), this.binSliderElement = b(), this.binInputElement = b(), this.popoverHeading = "", this.onBinCountChange = f(() => {
      const e = this.binInputElement.value?.value;
      e !== void 0 && x(e, this.binInputElement.value?.min, this.binInputElement.value?.max) ? this.binCountChange(e) : this.binInputElement.value && C({
        inputElement: this.binInputElement.value,
        status: D.INVALID
      });
    }, S.DebounceTimer), this.onBinCountSliderChange = f(() => {
      this.binCountChange(this.binSliderElement.value?.value?.toString() ?? "");
    }, S.DebounceTimer), this.onNormalDistColorSelect = (e) => {
      e.stopImmediatePropagation(), this.onColorElementSelect(this.model.normalDistSymbol, this._messages.normalDistStyle ?? "", this.normalDistOverlayElement);
    }, this.onMeanColorSelect = (e) => {
      e.stopImmediatePropagation(), this.onColorElementSelect(this.model.meanSymbol, this._messages.meanStyle ?? "", this.meanOverlayElement);
    }, this.onMedianColorSelect = (e) => {
      e.stopImmediatePropagation(), this.onColorElementSelect(this.model.medianSymbol, this._messages.medianStyle ?? "", this.medianOverlayElement);
    }, this.onStandardDevColorSelect = (e) => {
      e.stopImmediatePropagation(), this.onColorElementSelect(this.model.standardDevSymbol, this._messages.standardDevStyle ?? "", this.standardDevOverlayElement);
    }, this.onModelConfigChange = () => {
      this.requestUpdate();
    }, this.updateProps = (e) => {
      try {
        if (e.detail !== null && e.detail !== void 0) {
          const { contentKind: t } = e.detail, { value: i } = e.detail;
          switch (_(H), t) {
            case m.transformation:
              this.model.dataTransformationType = i ?? u.None;
              break;
            case m.numericFields:
              this.model.numericField = i ?? "";
              break;
            default:
              break;
          }
        }
      } catch (t) {
        throw t instanceof Error && this.arcgisChartsConfigDataChangeError.emit({ error: t, model: this.model }), t;
      }
      this.removeHistogramDataPopover(), this.requestUpdate();
    }, this.updateSymbolProps = (e) => {
      if (this.selectedBinColorSymbol !== void 0)
        this.onBinColorChange(e);
      else
        switch (this.selectedOverlayKind) {
          case a.Mean:
            this.onMeanStyleChange(e);
            break;
          case a.Median:
            this.onMedianStyleChange(e);
            break;
          case a.StandardDev:
            this.onStandardDevStyleChange(e);
            break;
          case a.NormalDist:
            this.onNormalDistStyleChange(e);
            break;
        }
    }, this.popoverClose = (e) => {
      this.histogramPopover === e.target && (this.selectedOverlaySymbol = void 0, this.selectedBinColorSymbol = void 0, this.selectedNumericalField = void 0, this.selectedTransformationType = void 0, this.binColorSelected = !1), this.removeHistogramDataPopover();
    }, this.binColorSelected = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigDataChangeError = $(), this.arcgisChartsConfigHistogramDataPopoverChange = $();
  }
  static {
    this.properties = { binColorSelected: 16, selectedBinColorSymbol: 16, selectedOverlaySymbol: 16, selectedNumericalField: 16, selectedTransformationType: 16, selectedOverlaySymbolType: 1, messageOverrides: 0, model: 0, meanValue: 9, medianValue: 9, standardDevValue: 9, minValue: 9, maxValue: 9, sumValue: 9, nullsValue: 9, countValue: 9, layerFieldsInfo: 0, open: 5 };
  }
  static {
    this.styles = j;
  }
  get selectedBinColorSymbol() {
    return this._selectedBinColorSymbol;
  }
  set selectedBinColorSymbol(e) {
    this._selectedBinColorSymbol = e, this.histogramPopover && (this.histogramPopover.selectedBinColor = e);
  }
  load() {
    this.modelChange(this.model), this.onModelConfigChange();
  }
  willUpdate(e) {
    e.has("model") && this.modelChange(this.model, e.get("model"));
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.removeHistogramDataPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
  }
  modelChange(e, t) {
    t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
  }
  removeHistogramDataPopover() {
    this.histogramPopover !== null && (this.histogramPopover = P(this.histogramPopover));
  }
  getDataTransformationLabel() {
    let e;
    switch (this.model.dataTransformationType) {
      case u.None:
        e = this._messages.none ?? "";
        break;
      case u.Log:
        e = this._messages.log ?? "";
        break;
      case u.Sqrt:
        e = this._messages.sqRt ?? "";
        break;
      default:
        e = this._messages.none ?? "";
        break;
    }
    return e;
  }
  getStatValue(e) {
    let t;
    switch (e) {
      case d.Min:
        t = this.minValue;
        break;
      case d.Max:
        t = this.maxValue;
        break;
      case d.Sum:
        t = this.sumValue;
        break;
      case d.Nulls:
        t = this.nullsValue;
        break;
      case d.Count:
        t = this.countValue !== void 0 && this.nullsValue !== void 0 ? this.countValue + this.nullsValue : Number.NaN;
        break;
      case d.CountExcludingNulls:
        t = this.countValue;
        break;
      case d.Mean:
        t = this.meanValue;
        break;
      case d.Median:
        t = this.medianValue;
        break;
      case d.StandardDev:
        t = this.standardDevValue;
        break;
      default:
        t = void 0;
        break;
    }
    return N(t, B);
  }
  binCountChange(e) {
    const t = Number.parseInt(e);
    this.model.binCount !== t && (this.model.binCount = t, this.binInputElement.value && C({
      inputElement: this.binInputElement.value,
      status: D.IDLE
    }));
  }
  onColorElementSelect(e, t, i) {
    this.binColorSelected = i === void 0, e.type === I.SFS ? (this.selectedOverlaySymbol = void 0, this.selectedBinColorSymbol = e, this.contentKind = m.fillSymbol) : (this.selectedBinColorSymbol = void 0, this.selectedOverlaySymbol = e, this.overlaySectionElement = i, this.contentKind = m.lineSymbol), this.popoverHeading = t, this.setupPopover();
  }
  onNumericFieldSelect(e) {
    e.stopImmediatePropagation(), this.selectedNumericalField = this.model.numericField, this.contentKind = m.numericFields, this.setupPopover();
  }
  onTransformationSelect(e) {
    e.stopImmediatePropagation(), this.selectedTransformationType = this.model.dataTransformationType, this.contentKind = m.transformation, this.setupPopover();
  }
  onBinColorSelect(e) {
    e.stopImmediatePropagation(), this.onColorElementSelect(this.model.binSymbol, this._messages.binColor ?? "");
  }
  onBinColorChange(e) {
    this.model.colorMatch = !1, this.model.binSymbol = e.detail, this.selectedBinColorSymbol = e.detail;
  }
  onMeanStyleChange(e) {
    this.model.meanSymbol = e.detail;
  }
  onMedianStyleChange(e) {
    this.model.medianSymbol = e.detail;
  }
  onStandardDevStyleChange(e) {
    this.model.standardDevSymbol = e.detail;
  }
  onNormalDistStyleChange(e) {
    this.model.normalDistSymbol = e.detail;
  }
  onShowDataLabelsChange(e) {
    this.model.dataLabelsVisibility = e.target.checked;
  }
  onOverlayListChange(e) {
    const t = e.target.selectedItems.map((h) => h.value), i = t.includes(a.Mean), c = t.includes(a.Median), l = t.includes(a.StandardDev), n = t.includes(a.NormalDist);
    this.meanOverlayVisible !== i && (this.model.showMeanOverlay = i, this.meanOverlayVisible = i), this.medianOverlayVisible !== c && (this.model.showMedianOverlay = c, this.medianOverlayVisible = c), this.standardDevOverlayVisible !== l && (this.model.showStandardDevOverlay = l, this.standardDevOverlayVisible = l), this.normalDistOverlayVisible !== n && (this.model.showNormalDistOverlay = n, this.normalDistOverlayVisible = n);
  }
  setupPopover() {
    this.removeHistogramDataPopover();
    const e = [...this.layerFieldsInfo];
    let t, i, c = "trailing", l, n, h, g;
    switch (this.contentKind) {
      case m.transformation:
        l = this.selectedTransformationType, t = this.transformationSelectionElement.value, h = void 0, g = void 0, n = void 0;
        break;
      case m.numericFields:
        n = this.selectedNumericalField, t = this.numericalFieldSelectionElement.value, h = void 0, g = void 0, l = void 0;
        break;
      case m.fillSymbol:
        t = this.binColorSectionElement.value, h = this.selectedBinColorSymbol, i = this.popoverHeading, c = "leading", g = void 0, l = void 0, n = void 0;
        break;
      case m.lineSymbol:
        this.selectedOverlayKind = this.overlaySectionElement?.value, t = this.overlaySectionElement, g = this.selectedOverlaySymbol, i = this.popoverHeading, h = void 0, l = void 0, n = void 0;
        break;
    }
    this.histogramPopover = z(r`<arcgis-charts-config-histogram-popover .headingTitle=${i} .referenceElement=${t} open .contentKind=${this.contentKind} .layerFieldsInfo=${e} .placement=${c} .selectedNumericField=${n} .selectedTransformationType=${l} .selectedBinColor=${h} .selectedOverlaySymbol=${g} @arcgisChartsConfigPopoverClose=${this.popoverClose} @arcgisChartsConfigHistogramPopoverChange=${this.updateProps} @arcgisChartsConfigHistogramPopoverSymbolChange=${this.updateSymbolProps}></arcgis-charts-config-histogram-popover>`), !document.body.contains(this.histogramPopover) && this.histogramPopover !== null && document.body.appendChild(this.histogramPopover);
  }
  renderFieldSelect() {
    return r`<arcgis-charts-config-field-select .label=${L(this.layerFieldsInfo, this.model.numericField)} @click=${this.onNumericFieldSelect} ${v(this.numericalFieldSelectionElement)}></arcgis-charts-config-field-select>`;
  }
  renderDataTransformationType() {
    return r`<arcgis-charts-config-field-select .label=${this.getDataTransformationLabel()} @click=${this.onTransformationSelect} ${v(this.transformationSelectionElement)}></arcgis-charts-config-field-select>`;
  }
  renderColorListItem(e) {
    const { textLabel: t, key: i, value: c, selected: l, ref: n, colorAction: h, color: g } = e, [p, E, w, M] = [...g ?? V()];
    return y(i, r`<calcite-list-item .label=${t ?? ""} .value=${c} .selected=${l} ${v(n ?? void 0)}><calcite-action text=color slot=actions-end appearance=transparent @click=${h}><calcite-icon icon=line-solid style=${O(p !== void 0 ? { color: `rgba(${p},${E},${w},${(M ?? 0) / 255})` } : {})}></calcite-icon></calcite-action></calcite-list-item>`);
  }
  renderBinColorElement() {
    const [e, t, i, c] = [...this.model.binSymbol?.color ?? T(0)];
    return r`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.binColor} value=selectTrendLine .selected=${this.binColorSelected} @click=${this.onBinColorSelect} ${v(this.binColorSectionElement)}><calcite-icon slot=content-end icon=square-f style=${O({ color: `rgba(${e},${t},${i},${c / 255})` })} class=${s(o.iconSelect)}></calcite-icon></calcite-list-item></calcite-list>`;
  }
  renderNormalDistOverlay() {
    return this.normalDistOverlayVisible = this.model.showNormalDistOverlay, this.renderColorListItem({
      textLabel: this._messages.normalDist,
      color: this.model.normalDistSymbol?.color,
      key: a.NormalDist,
      value: a.NormalDist,
      selected: this.model.showNormalDistOverlay,
      ref: (e) => {
        this.normalDistOverlayElement = e;
      },
      colorAction: this.onNormalDistColorSelect
    });
  }
  renderMeanOverlay() {
    return this.meanOverlayVisible = this.model.showMeanOverlay, this.renderColorListItem({
      textLabel: this._messages.mean,
      textDescription: this.meanValue,
      color: this.model.meanSymbol?.color,
      key: a.Mean,
      value: a.Mean,
      selected: this.model.showMeanOverlay,
      ref: (e) => {
        this.meanOverlayElement = e;
      },
      colorAction: this.onMeanColorSelect
    });
  }
  renderStandardDevOverlay() {
    return this.standardDevOverlayVisible = this.model.showStandardDevOverlay, this.renderColorListItem({
      textLabel: this._messages.standardDev,
      textDescription: this.standardDevValue,
      color: this.model.standardDevSymbol?.color,
      key: a.StandardDev,
      value: a.StandardDev,
      selected: this.model.showStandardDevOverlay,
      ref: (e) => {
        this.standardDevOverlayElement = e;
      },
      colorAction: this.onStandardDevColorSelect
    });
  }
  renderMedianOverlay() {
    return this.medianOverlayVisible = this.model.showMedianOverlay, this.renderColorListItem({
      textLabel: this._messages.median,
      textDescription: this.medianValue,
      color: this.model.medianSymbol?.color,
      key: a.Median,
      value: a.Median,
      selected: this.model.showMedianOverlay,
      ref: (e) => {
        this.medianOverlayElement = e;
      },
      colorAction: this.onMedianColorSelect
    });
  }
  renderOverlayList() {
    return r`<calcite-list label selection-mode=multiple @calciteListChange=${this.onOverlayListChange}>${this.renderNormalDistOverlay()}${this.renderMeanOverlay()}${this.renderMedianOverlay()}${this.renderStandardDevOverlay()}</calcite-list>`;
  }
  renderStatItem(e) {
    return y(e, r`<calcite-list-item .label=${this._messages[e]} .description=${this.getStatValue(e)} .value=${e}></calcite-list-item>`);
  }
  renderStats() {
    const e = Object.values(d);
    return r`<calcite-list label class=${s(o.histogramStatsList)}>${e.map((t) => this.renderStatItem(t))}</calcite-list>`;
  }
  renderShowDataLabels() {
    return r`<div class=${s(o.row)}><calcite-label class=${s(o.label)} layout=inline-space-between>${this._messages.showDataLabels}<calcite-switch .checked=${this.model.dataLabelsVisibility} @calciteSwitchChange=${this.onShowDataLabelsChange}></calcite-switch></calcite-label></div>`;
  }
  renderBinsSection() {
    return r`<div class=${s(o.binCountContainer)}><calcite-slider label-handles min=1 max=64 step=1 snap .value=${this.model.binCount} @calciteSliderChange=${this.onBinCountSliderChange} ${v(this.binSliderElement)}></calcite-slider><calcite-input type=number min=1 max=64 step=1 .value=${F(this.model.binCount)} @calciteInputInput=${this.onBinCountChange} ${v(this.binInputElement)}></calcite-input></div>`;
  }
  render() {
    const e = this.renderFieldSelect(), t = this.renderDataTransformationType();
    return r`<div class=${s(o.sectionLabel)}>${this._messages.variables}</div><calcite-label class=${s(o.label)}>${this._messages.number}${e}</calcite-label><calcite-label class=${s(o.label)}>${this._messages.withTransformation}${t}</calcite-label><div class=${s(o.sectionLabel)}>${this._messages.bins}</div><p class=${s(o.binTextPadding)}>${this._messages.numberOfBins}</p>${this.renderBinsSection()}${this.renderBinColorElement()}<div class=${s(o.sectionLabel)}>${this._messages.overlays}</div>${this.renderOverlayList()}${this.renderShowDataLabels()}<div class=${s(o.sectionLabel)}>${this._messages.statistics}</div>${this.renderStats()}`;
  }
}
k("arcgis-charts-config-histogram-data", q);
export {
  q as ArcgisChartsConfigHistogramData
};
