/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as f } from "../../chunks/runtime.js";
import { keyed as u } from "lit/directives/keyed.js";
import "@arcgis/toolkit/intl";
import "lodash-es";
import "luxon";
import "d3-array";
import "@arcgis/toolkit/type";
import "../../chunks/series-types.js";
import { dp as I } 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 d } from "../../chunks/popover-ui-utils.js";
import { LitElement as $, renderElement as L, safeStyleMap as x } from "@arcgis/lumina";
import { css as P, html as o } from "lit";
import { repeat as y } from "lit/directives/repeat.js";
import { u as b } from "../../chunks/useT9n.js";
import { g as M } from "../../chunks/chart-ui-utils2.js";
const O = 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)}`;
class k extends $ {
  constructor() {
    super(...arguments), this._messages = b(), this.seriesPopover = null, this.open = !1, 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;
        this.model.colorMatch = !1, i !== void 0 && (this.model.setSeriesColor(i, this.selectedSeriesIndex ?? -1), this.model.setSeriesMarkerColor(i, this.selectedSeriesIndex ?? -1));
      }
    }, this.seriesLineStyleChange = (e) => {
      if (e.detail !== null && e.detail !== void 0) {
        const { lineStyle: 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 { lineWidth: i } = e.detail;
        i !== void 0 && (this.model.setSeriesLineWidth(i, this.selectedSeriesIndex ?? -1), this.model.setSeriesMarkerSize(i * 2, this.selectedSeriesIndex ?? -1));
      }
    }, this.seriesPopoverClose = (e) => {
      const { selectedSeriesIndex: i } = e.detail;
      this.selectedSeriesIndex === i && (this.seriesPopover = d(this.seriesPopover), this.selectedSeriesIndex = void 0);
    }, this.onModelConfigChange = () => {
      this.requestUpdate();
    }, this.seriesOrderResetCounter = 0, this.activeColorMatch = !1, this.popoverPlacement = "leading";
  }
  static {
    this.properties = { selectedSeriesIndex: 16, seriesOrderResetCounter: 16, messageOverrides: 0, model: 0, activeColorMatch: 5, popoverPlacement: 1 };
  }
  static {
    this.styles = O;
  }
  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, i) {
    i?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
  }
  selectedSeriesIndexChange() {
    this.selectedSeriesIndex !== void 0 && (this.seriesPopover = L(o`<arcgis-charts-config-line-chart-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)} .placement=${this.popoverPlacement} .open=${this.open} .selectedSeriesIndex=${this.selectedSeriesIndex} @arcgisChartsConfigSeriesPopoverNameChange=${this.seriesNameChange} @arcgisChartsConfigSeriesPopoverColorChange=${this.seriesColorChange} @arcgisChartsConfigSeriesPopoverLineStyleChange=${this.seriesLineStyleChange} @arcgisChartsConfigSeriesPopoverLineWidthChange=${this.seriesLineWidthChange} @arcgisChartsConfigPopoverClose=${this.seriesPopoverClose}></arcgis-charts-config-line-chart-series-popover>`), this.seriesPopover && !document.body.contains(this.seriesPopover) && document.body.appendChild(this.seriesPopover));
  }
  removeSeriesPopover() {
    this.seriesPopover !== void 0 && this.seriesPopover !== null && (this.seriesPopover.open = !1, this.seriesPopover = d(this.seriesPopover));
  }
  buildSeriesListItems() {
    const e = this.model.seriesLength, i = Array.from({ length: e }, (s, t) => t);
    return y(i, (s) => this.model.getSeriesId(s), (s) => {
      const t = this.model.getSeriesId(s), l = this.model.getSeriesColor(s), h = this.model.getSeriesName(s), c = this.model.chartSubType === I.BarAndLineFromFields ? this._messages.series : t, m = this.model.getSeriesLineStyle(s), p = M(m);
      let n = "#CCCCCC", a = "minus-circle";
      if ((e > 1 || !this.activeColorMatch) && l !== void 0) {
        a = `line-${p}`;
        const [g, C, S, v] = [...l];
        n = `rgba(${g},${C},${S},${v / 255})`;
      }
      return o`<calcite-list-item .label=${h ?? t ?? ""} .description=${c} .value=${t} .selected=${this.selectedSeriesIndex === s} @click=${this.openSeriesPopOver}><calcite-icon slot=content-end .icon=${a} style=${x({ color: n })}></calcite-icon></calcite-list-item>`;
    });
  }
  buildSeriesList() {
    return u(this.seriesOrderResetCounter, o`<calcite-list label drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${this.buildSeriesListItems()}</calcite-list>`);
  }
  resetSeriesOriginal() {
    this.selectedSeriesIndex = void 0, this.model.resetSeriesStyling(), this.seriesOrderResetCounter += 1;
  }
  onCalciteListOrderChange(e) {
    if (e.detail !== null && e.detail !== void 0) {
      const { newIndex: i, oldIndex: r } = e.detail;
      this.model.moveSeries(r, i), this.seriesOrderResetCounter += 1;
    }
  }
  openSeriesPopOver(e) {
    e.stopImmediatePropagation(), this.removeSeriesPopover();
    const i = e.target, r = i.localName === "calcite-list-item" ? i : i.parentNode, s = this.model.getSeriesIndex(r.value);
    this.open = this.selectedSeriesIndex !== s, this.selectedSeriesIndex = this.selectedSeriesIndex !== s ? s : void 0;
  }
  render() {
    return o`<calcite-panel .heading=${this._messages.series}><calcite-button slot=header-actions-end @click=${this.resetSeriesOriginal} .disabled=${!this.model.resetAvailable()} appearance=transparent scale=s icon-end=reset>${this._messages.reset}</calcite-button>${this.buildSeriesList()}</calcite-panel>`;
  }
}
f("arcgis-charts-config-line-chart-series", k);
export {
  k as ArcgisChartsConfigLineChartSeries
};
