/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as I } from "../../chunks/runtime.js";
import { css as P, html as n } from "lit";
import { keyed as y } from "lit/directives/keyed.js";
import "@arcgis/toolkit/intl";
import "lodash-es";
import "luxon";
import "d3-array";
import "@arcgis/toolkit/type";
import { f as d } from "../../chunks/series-types.js";
import { dp as S } from "../../chunks/index.js";
import "@arcgis/core/Graphic.js";
import "@arcgis/core/renderers/support/jsonUtils.js";
import "@arcgis/core/symbols/support/symbolUtils.js";
import "@esri/arcgis-html-sanitizer";
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 f } from "../../chunks/popover-ui-utils.js";
import { repeat as M } from "lit/directives/repeat.js";
import { u as B } from "../../chunks/useT9n.js";
import { LitElement as O, renderElement as h, safeStyleMap as m, safeClassMap as a } from "@arcgis/lumina";
import { d as w } from "../../chunks/chart-ui-utils2.js";
const l = {
  topSection: "top-section",
  sectionLabel: "section-label",
  list: "list",
  infoIcon: "info-icon"
}, T = P`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.top-section{margin-top:var(--arcgis-charts-config-margin-minor)}.section-label{display:flex;margin-bottom:var(--arcgis-charts-config-margin-major);margin-left:var(--arcgis-charts-config-margin-minor);margin-right: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)}.list{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-major)}.info-icon{margin:auto 1rem;pointer-events:auto}`;
class N extends O {
  constructor() {
    super(...arguments), this._messages = B(), this.resetSeriesOriginal = () => {
      this.configSeriesOpen = !1, this.selectedSeriesIndex = void 0, this.model.resetSeriesStyling(), this.seriesOrderResetCounter += 1;
    }, this.onMultipleSeriesSelect = (e) => {
      if (!this.shouldDisableMeanLinesOption()) {
        const i = e.target, t = i.value ?? i.parentElement.value ?? "";
        this.model.showMeanLines = t === d.MeanLines;
      }
    }, this.seriesNameChange = (e) => {
      if (e.detail !== null || e.detail !== void 0) {
        const i = e.detail?.name;
        this.model.setSeriesName(i, this.selectedSeriesIndex ?? -1);
      }
    }, this.seriesColorChange = (e) => {
      if (e.detail !== null && e.detail !== void 0) {
        const { color: i } = e.detail;
        i !== void 0 && (this.meanLinesBoxColorIsSelected ? this.model.meanLinesBoxColor = i : (this.model.colorMatch = !1, this.model.setSeriesColor(i, this.selectedSeriesIndex ?? -1)));
      }
    }, this.seriesLineStyleChange = (e) => {
      if (e.detail !== null && e.detail !== void 0) {
        const { style: i } = e.detail;
        i !== void 0 && this.model.setSeriesLineStyle(i, this.selectedSeriesIndex ?? -1);
      }
    }, this.seriesLineWidthChange = (e) => {
      if (e.detail !== null && e.detail !== void 0) {
        const { width: i } = e.detail;
        i !== void 0 && this.model.setSeriesLineWidth(i, this.selectedSeriesIndex ?? -1);
      }
    }, this.onCalciteListOrderChange = (e) => {
      const i = this.model.boxPlotSeriesIndexWhenMeanLinesShown;
      if (e.detail !== null && e.detail !== void 0) {
        const { newIndex: t, oldIndex: r } = e.detail;
        let s = r, o = t;
        i !== -1 && (s = r >= i ? r + 1 : r, o = t >= i ? t + 1 : t), this.model.moveSeries(s, o), this.seriesOrderResetCounter += 1;
      }
    }, this.seriesPopoverClose = () => {
      this.selectedSeriesIndex = void 0, this.meanLinesBoxColorIsSelected = !1, this.configSeriesOpen = !1, this.seriesPopover = f(this.seriesPopover);
    }, this.openSeriesPopOver = (e) => {
      e.stopImmediatePropagation(), this.removeSeriesPopover();
      const i = e.target, t = i.localName === "calcite-list-item" ? i : i.parentNode, r = !this.configSeriesOpen, s = this.model.getSeriesIndex(t.value);
      if (s !== void 0 && s !== -1)
        this.configSeriesOpen = this.selectedSeriesIndex === s ? r : !0, this.configSeriesOpen ? this.selectedSeriesIndex = s : this.selectedSeriesIndex = void 0, this.meanLinesBoxColorIsSelected = !1;
      else if (t.value === "box-plot-color") {
        const o = !this.meanLinesBoxColorIsSelected;
        this.configSeriesOpen = o, this.meanLinesBoxColorIsSelected = o, this.selectedSeriesIndex = void 0;
      }
    }, this.createTooltip = (e, i) => {
      const t = e.target;
      this.tooltip = h(n`<calcite-tooltip style=${m({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${t} open placement=top>${i ?? ""}</calcite-tooltip>`), document.body.appendChild(this.tooltip);
    }, this.destroyTooltip = () => {
      w(this.tooltip);
    }, this.onModelConfigChange = () => {
      this.requestUpdate();
    }, this.meanLinesBoxColorIsSelected = !1, this.seriesOrderResetCounter = 0, this.configSeriesOpen = !1, this.activeColorMatch = !1, this.popoverPlacement = "leading";
  }
  static {
    this.properties = { selectedSeriesIndex: 16, meanLinesBoxColorIsSelected: 16, seriesOrderResetCounter: 16, messageOverrides: 0, model: 0, configSeriesOpen: 5, activeColorMatch: 5, popoverPlacement: 1 };
  }
  static {
    this.styles = T;
  }
  load() {
    this.modelChange(this.model), this.onModelConfigChange();
  }
  willUpdate(e) {
    e.has("model") && this.modelChange(this.model, e.get("model")), e.has("selectedSeriesIndex") && this.selectedSeriesIndexChange(), e.has("meanLinesBoxColorIsSelected") && this.meanLinesBoxColorIsSelectedChange();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.removeSeriesPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
  }
  modelChange(e, i) {
    i?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
  }
  selectedSeriesIndexChange() {
    this.selectedSeriesIndex !== void 0 && this.configSeriesOpen ? this.setupSeriesPopover() : this.removeSeriesPopover();
  }
  meanLinesBoxColorIsSelectedChange() {
    this.meanLinesBoxColorIsSelected && this.configSeriesOpen ? this.setupSeriesPopover() : this.removeSeriesPopover();
  }
  removeSeriesPopover() {
    this.seriesPopover !== null && this.seriesPopover !== void 0 && (this.seriesPopover.open = !1, this.seriesPopover = f(this.seriesPopover));
  }
  buildSeriesListItems() {
    const e = this.model.seriesLength, i = this.model.boxPlotSeriesIndexWhenMeanLinesShown, t = Array.from({ length: e }, (s, o) => o);
    return M(t, (s) => this.model.getSeriesId(s), (s) => {
      const o = this.model.getSeriesId(s), c = this.model.getSeriesColor(s), v = this.model.getSeriesName(s), p = this.model.chartSubType, u = p === S.BoxPlotMonoField || p === S.BoxPlotMultiFields ? this._messages.series : o;
      let g = "#CCCCCC", C = "minus-square";
      if ((e > 1 || !this.activeColorMatch) && c !== void 0) {
        C = this.model.showMeanLines === !0 ? "line-solid" : "square-f";
        const [x, $, L, b] = [...c];
        g = `rgba(${x},${$},${L},${b / 255})`;
      }
      return i !== s ? n`<calcite-list-item .label=${v ?? o ?? ""} .description=${u} .value=${o} .selected=${this.selectedSeriesIndex === s} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${C} style=${m({ color: g })}></calcite-icon></calcite-list-item>` : null;
    });
  }
  buildSeriesList() {
    return y(this.seriesOrderResetCounter, n`<calcite-list label class=${a(l.list)} drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSeriesListItems()}</calcite-list>`);
  }
  setupSeriesPopover() {
    this.removeSeriesPopover(), this.meanLinesBoxColorIsSelected ? this.seriesPopover = h(n`<arcgis-charts-config-box-plot-series-popover .referenceElement=${this.el} .selectedColor=${this.model.meanLinesBoxColor} .placement=${this.popoverPlacement} open .selectedSeriesIndex=${this.selectedSeriesIndex} .labelCanBeConfigured=${!this.meanLinesBoxColorIsSelected} @arcgisChartsConfigSeriesPopoverNameChange=${this.seriesNameChange} @arcgisChartsConfigSeriesPopoverColorChange=${this.seriesColorChange} @arcgisChartsConfigSeriesPopoverLineStyleChange=${this.seriesLineStyleChange} @arcgisChartsConfigSeriesPopoverLineWidthChange=${this.seriesLineWidthChange} @arcgisChartsConfigPopoverClose=${this.seriesPopoverClose}></arcgis-charts-config-box-plot-series-popover>`) : this.selectedSeriesIndex !== void 0 && (this.seriesPopover = h(n`<arcgis-charts-config-box-plot-series-popover .referenceElement=${this.el} .selectedName=${this.model.getSeriesName(this.selectedSeriesIndex)} .selectedColor=${this.model.getSeriesColor(this.selectedSeriesIndex)} .selectedLineStyle=${this.model.getSeriesLineStyle(this.selectedSeriesIndex)} .selectedLineWidth=${this.model.getSeriesLineWidth(this.selectedSeriesIndex)} .isLineSymbol=${this.model.showMeanLines} .placement=${this.popoverPlacement} open .selectedSeriesIndex=${this.selectedSeriesIndex} .labelCanBeConfigured=${!this.meanLinesBoxColorIsSelected} @arcgisChartsConfigSeriesPopoverNameChange=${this.seriesNameChange} @arcgisChartsConfigSeriesPopoverColorChange=${this.seriesColorChange} @arcgisChartsConfigSeriesPopoverLineStyleChange=${this.seriesLineStyleChange} @arcgisChartsConfigSeriesPopoverLineWidthChange=${this.seriesLineWidthChange} @arcgisChartsConfigPopoverClose=${this.seriesPopoverClose}></arcgis-charts-config-box-plot-series-popover>`)), this.seriesPopover && !document.body.contains(this.seriesPopover) && document.body.appendChild(this.seriesPopover);
  }
  shouldDisableMeanLinesOption() {
    return this.model.splitByField === "" || this.model.splitByField === void 0;
  }
  renderMeanLinesBoxColorItem() {
    let e = "#CCCCCC", i = "minus-square";
    const t = this.model.meanLinesBoxColor;
    if (t !== void 0) {
      i = "square-f";
      const [r, s, o, c] = [...t];
      e = `rgba(${r},${s},${o},${c / 255})`;
    }
    return n`<calcite-list label class=${a(l.list)}><calcite-list-item value=box-plot-color .label=${this._messages.boxPlotColor} .selected=${this.meanLinesBoxColorIsSelected} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${i} style=${m({ color: e })}></calcite-icon></calcite-list-item></calcite-list>`;
  }
  renderMultipleSeriesOption() {
    const e = this.shouldDisableMeanLinesOption();
    return e ? [] : [
      n`<div class=${`${l.sectionLabel} ${l.topSection}`}>${this._messages.displayMultipleSeries}</div>`,
      n`<calcite-list label class=${a(l.list)} selection-mode=single-persist selection-appearance=border @click=${this.onMultipleSeriesSelect}><calcite-list-item .label=${this._messages.sideBySide} .value=${d.Side} .selected=${this.model.showMeanLines !== !0}><calcite-icon slot=content-start scale=l icon=graph-box-side-by-side></calcite-icon><calcite-icon class=${a(l.infoIcon)} slot=actions-end icon=information scale=s flip-rtl @mouseover=${(i) => this.createTooltip(i, this._messages.sideBySideTooltip ?? "")} @mouseout=${this.destroyTooltip}></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.meanLines} .value=${d.MeanLines} .disabled=${e} .selected=${this.model.showMeanLines === !0}><calcite-icon slot=content-start scale=l icon=graph-box-mean-lines></calcite-icon><calcite-icon class=${a(l.infoIcon)} slot=actions-end icon=information scale=s flip-rtl @mouseover=${(i) => this.createTooltip(i, this._messages.meanLinesTooltip ?? "")} @mouseout=${this.destroyTooltip}></calcite-icon></calcite-list-item></calcite-list>`,
      this.model.showMeanLines === !0 ? this.renderMeanLinesBoxColorItem() : null
    ];
  }
  render() {
    return n`${this.renderMultipleSeriesOption()}<div class=${a(l.sectionLabel)}>${this._messages.series}<calcite-button @click=${this.resetSeriesOriginal} .disabled=${!this.model.resetAvailable()} appearance=transparent icon-end=reset>${this._messages.reset}</calcite-button></div>${this.buildSeriesList()}`;
  }
}
I("arcgis-charts-config-box-plot-series", N);
export {
  N as ArcgisChartsConfigBoxPlotSeries
};
