/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as k } from "../../chunks/runtime.js";
import { keyed as x } from "lit/directives/keyed.js";
import "@arcgis/toolkit/intl";
import "lodash-es";
import "luxon";
import "d3-array";
import "@arcgis/toolkit/type";
import { e as r, a as u } from "../../chunks/series-types.js";
import { dp as T, ds as C } 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 v } from "../../chunks/popover-ui-utils.js";
import { repeat as P } from "lit/directives/repeat.js";
import { u as L } from "../../chunks/useT9n.js";
import { css as M, html as l } from "lit";
import { LitElement as N, createEvent as O, renderElement as f, safeStyleMap as h, safeClassMap as a } from "@arcgis/lumina";
import { d as _ } from "../../chunks/chart-ui-utils2.js";
const E = {
  stackedType: "stacked-type"
}, o = {
  topSection: "top-section",
  sectionLabel: "section-label",
  list: "list",
  disabledInfo: "disabled-info",
  disabledStackingOption: "disabled-stacking-option"
}, w = M`: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)}.disabled-info{margin:auto 1rem;pointer-events:auto}.disabled-info:active{margin:auto 1rem;pointer-events:none}.disabled-stacking-option{pointer-events:none;opacity:var(--calcite-opacity-disabled)}`;
class D extends N {
  constructor() {
    super(...arguments), this._messages = L(), this.open = !1, this.seriesNameChange = (e) => {
      if (e.detail !== null && e.detail !== void 0) {
        const t = e.detail.name;
        if (this.isNullCategorySelected) {
          const i = this.model.nullCategory;
          if (i) {
            const s = { ...i, text: t };
            this.model.nullCategory = s;
          }
        } else
          this.model.setSeriesName(t, this.selectedSeriesIndex ?? -1);
      }
    }, this.seriesColorChange = (e) => {
      if (e.detail !== null && e.detail !== void 0) {
        const { color: t } = e.detail;
        if (t !== void 0) {
          if (this.isNullCategorySelected) {
            const i = this.model.nullCategory, s = i?.symbol && {
              ...i,
              symbol: {
                ...i.symbol,
                color: t,
                outline: i.symbol.outline && { ...i.symbol.outline, color: t }
              }
            };
            this.model.nullCategory = s;
          } else
            this.model.setSeriesColor(t, this.selectedSeriesIndex ?? -1);
          this.model.colorMatch = !1;
        }
      }
    }, this.seriesPopoverClose = (e) => {
      const { selectedSeriesIndex: t } = e.detail;
      this.selectedSeriesIndex === t && (this.seriesPopover = v(this.seriesPopover), this.selectedSeriesIndex = void 0);
    }, this.onModelConfigChange = () => {
      this.requestUpdate();
    }, this.seriesOrderResetCounter = 0, this.activeColorMatch = !1, this.popoverPlacement = "leading", this.arcgisChartsConfigDataChangeError = O();
  }
  static {
    this.properties = { seriesOrderResetCounter: 16, selectedSeriesIndex: 16, messageOverrides: 0, model: 0, activeColorMatch: 5, popoverPlacement: 1 };
  }
  static {
    this.styles = w;
  }
  load() {
    this.modelChange(this.model), this.onModelConfigChange();
  }
  willUpdate(e) {
    e.has("model") && this.modelChange(this.model, e.get("model")), e.has("selectedSeriesIndex") && this.selectedSeriesIndexChange();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.removeSeriesPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
  }
  modelChange(e, t) {
    t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
  }
  removeSeriesPopover() {
    this.seriesPopover !== null && this.seriesPopover !== void 0 && (this.seriesPopover.open = !1, this.seriesPopover = v(this.seriesPopover));
  }
  selectedSeriesIndexChange() {
    this.selectedSeriesIndex !== void 0 && (this.seriesPopover = f(l`<arcgis-charts-config-bar-chart-series-popover .referenceElement=${this.el} .selectedName=${this.selectedSeriesIndex != null ? this.model.getSeriesName(this.selectedSeriesIndex) : void 0} .selectedColor=${this.selectedSeriesIndex != null ? this.model.getSeriesColor(this.selectedSeriesIndex) : void 0} .placement=${this.popoverPlacement} .selectedSeriesIndex=${this.selectedSeriesIndex != null ? this.selectedSeriesIndex : void 0} .nullCategory=${this.isNullCategorySelected ? this.model.nullCategory : void 0} .open=${this.open} @arcgisChartsConfigSeriesPopoverNameChange=${this.seriesNameChange} @arcgisChartsConfigSeriesPopoverColorChange=${this.seriesColorChange} @arcgisChartsConfigPopoverClose=${this.seriesPopoverClose}></arcgis-charts-config-bar-chart-series-popover>`), this.seriesPopover && !document.body.contains(this.seriesPopover) && document.body.appendChild(this.seriesPopover));
  }
  buildSeriesListItems() {
    const e = this.model.seriesLength ?? 0, t = Array.from({ length: e }, (s, n) => n);
    return P(t, (s) => this.model.getSeriesId(s), (s) => {
      const n = this.model.getSeriesId(s), c = this.model.getSeriesColor(s), d = this.model.getSeriesName(s), S = this.model.chartSubType === T.BarAndLineFromFields ? this._messages.series : n;
      let g = "#CCCCCC", p = "minus-square";
      if ((e > 1 || !this.activeColorMatch) && c !== void 0) {
        p = "square-f";
        const [b, y, $, I] = [...c];
        g = `rgba(${b},${y},${$},${I / 255})`;
      }
      return l`<calcite-list-item .label=${d ?? n ?? ""} .description=${S} .value=${n} .selected=${this.selectedSeriesIndex === s} @click=${this.openSeriesPopOver}><calcite-icon .icon=${p} style=${h({ color: g })} slot=content-end></calcite-icon></calcite-list-item>`;
    });
  }
  buildSeriesList() {
    return x(this.seriesOrderResetCounter, l`<calcite-list label class=${a(o.list)} drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSeriesListItems()}</calcite-list>`);
  }
  buildNullCategoryUI() {
    const e = this.model.nullCategory, t = this._messages.nullCategory, i = e?.symbol?.color ?? C.nullCategory?.symbol?.color ?? C.grayColor, [s, n, c, d] = [...i], m = `rgba(${s},${n},${c},${d / 255})`;
    return l`<calcite-list label class=${a(o.list)} selection-mode=none><calcite-list-item .label=${t} .value=${t} .selected=${this.selectedSeriesIndex === null} @click=${this.openSeriesPopOver}><calcite-icon icon=square-f style=${h({ color: m })} slot=content-end></calcite-icon></calcite-list-item></calcite-list>`;
  }
  buildMultipleBarTypeList() {
    const e = this.shouldDisableStacking();
    return e && this.model.stackedType !== r.Side && (this.model.stackedType = r.Side), l`<calcite-list label id=${E.stackedType} class=${a(o.list)} selection-mode=single-persist selection-appearance=border @click=${this.onMultipleBarSelect}><calcite-list-item .label=${this._messages.sideBySide} .value=${r.Side} .selected=${this.model.stackedType === void 0 || this.model.stackedType === r.Side}><calcite-icon scale=l icon=graph-bar-side-by-side slot=content-start></calcite-icon></calcite-list-item><calcite-list-item class=${a(e ? o.disabledStackingOption : "")} .label=${this._messages.stacked} .value=${r.Stacked} .selected=${this.model.stackedType === r.Stacked}><calcite-icon scale=l icon=graph-bar-stacked slot=content-start></calcite-icon>${e && l`<calcite-icon class=${a(o.disabledInfo)} slot=content-end icon=information scale=s flip-rtl @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-icon>` || ""}</calcite-list-item><calcite-list-item class=${a(e ? o.disabledStackingOption : "")} .label=${this._messages.stacked100} .value=${r.Stacked100} .selected=${this.model.stackedType === r.Stacked100}><calcite-icon scale=l icon=graph-bar100-stacked slot=content-start></calcite-icon>${e && l`<calcite-icon class=${a(o.disabledInfo)} slot=content-end icon=information scale=s flip-rtl @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-icon>` || ""}</calcite-list-item></calcite-list>`;
  }
  resetSeriesOriginal() {
    this.selectedSeriesIndex = void 0, this.model.resetSeriesStyling(), this.seriesOrderResetCounter += 1;
  }
  onMultipleBarSelect(e) {
    if (!this.shouldDisableStacking()) {
      const t = e.target;
      this.model.stackedType = t.value ?? t.parentElement.value ?? "";
    }
  }
  onCalciteListOrderChange(e) {
    if (e.detail !== null && e.detail !== void 0) {
      const { newIndex: t, oldIndex: i } = e.detail;
      this.model.moveSeries(i, t), this.seriesOrderResetCounter += 1;
    }
  }
  openSeriesPopOver(e) {
    e.stopImmediatePropagation(), this.removeSeriesPopover();
    const t = e.target, i = t.localName === "calcite-list-item" ? t : t.parentNode, s = this.model.getSeriesIndex(i.value);
    this.open = this.selectedSeriesIndex !== s, this.selectedSeriesIndex = this.selectedSeriesIndex !== s ? s : void 0, this.isNullCategorySelected = i.value === this._messages.nullCategory;
  }
  createTooltip(e) {
    const t = e.target, i = (this.model.aggregationType === u.NoAggregation ? this._messages.noAggStackingDisabled : this._messages.singleStackingDisabled) ?? "";
    this.tooltip = f(l`<calcite-tooltip style=${h({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${t} open placement=top>${i}</calcite-tooltip>`), document.body.appendChild(this.tooltip);
  }
  destroyTooltip() {
    _(this.tooltip);
  }
  shouldDisableStacking() {
    return (this.model.seriesLength ?? 0) <= 1 || this.model.aggregationType === u.NoAggregation;
  }
  render() {
    return l`<div class=${`${o.sectionLabel} ${o.topSection}`}>${this._messages.displayMultiSeries}</div>${this.buildMultipleBarTypeList()}<div class=${a(o.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()}${this.model.nullCategory !== void 0 && this.model.fetchNULLValues ? this.buildNullCategoryUI() : null}`;
  }
}
k("arcgis-charts-config-bar-chart-series", D);
export {
  D as ArcgisChartsConfigBarChartSeries
};
