/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as d } from "../../chunks/runtime.js";
import { keyed as m } 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 "../../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 { g as p } from "../../chunks/chart-ui-utils.js";
import { r as C } from "../../chunks/popover-ui-utils.js";
import { u as g } from "../../chunks/useT9n.js";
import { css as f, html as a } from "lit";
import { LitElement as v, createEvent as s, safeClassMap as c, renderElement as u } from "@arcgis/lumina";
import { repeat as w } from "lit/directives/repeat.js";
const n = {
  addChartContainer: "add-chart-container",
  viewChartComponent: "view-chart-component",
  header: "header",
  dropdownPopup: "dropdown-popup"
}, I = f`.view-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}.add-chart-container{display:flex;justify-content:center;padding:2rem 0;background-color:var(--calcite-color-background)}.header{margin-left:1rem}.dropdown-popup{position:relative}`;
class R extends v {
  constructor() {
    super(...arguments), this._messages = g(), this.chartRenamePopover = null, this.popoverClose = () => {
      const e = this.modelList?.find((t) => t.chartId === this.selectedChartId);
      this.chartTitle = e?.titleText ?? "", this.selectedActionChartId = "", this.removeChartRenamePopover();
    }, this.onChartRename = (e) => {
      if (!this.disableEditing) {
        this.chartTitle = e.detail.name;
        const t = this.modelList?.find((i) => i.chartId === this.selectedActionChartId);
        t !== void 0 && (t.titleText = this.chartTitle), this.selectedActionChartId = "", this.removeChartRenamePopover();
      }
    }, this.onModelConfigChange = () => {
      this.requestUpdate();
    }, this.onCalciteListOrderChange = (e) => {
      if (e.detail !== null && e.detail !== void 0) {
        const { newIndex: t, oldIndex: i } = e.detail;
        if (this.modelList !== void 0 && this.modelList?.length > 0) {
          const r = [...this.modelList], o = r?.[i], h = r?.[t];
          o && h && (r.splice(i, 1), r.splice(t, 0, o)), this.chartsOrderReorderCounter += 1, this.arcgisChartsConfigModelListReorder.emit({ modelList: r });
        }
      }
    }, this.isChartRenamePopoverOpen = !1, this.chartTitle = "", this.chartsOrderReorderCounter = 0, this.noGroup = !1, this.disableEditing = !1, this.arcgisChartsConfigModelListReorder = s(), this.arcgisChartsConfigViewChartAddChart = s(), this.arcgisChartsConfigViewChartDelete = s(), this.arcgisChartsConfigViewChartEdit = s(), this.arcgisChartsConfigViewChartSelect = s();
  }
  static {
    this.properties = { isChartRenamePopoverOpen: 16, chartTitle: 16, selectedActionChartId: 16, chartsOrderReorderCounter: 16, messageOverrides: 0, selectedChartId: 1, layer: 0, modelList: 0, noGroup: 5, disableEditing: 5 };
  }
  static {
    this.styles = I;
  }
  willUpdate(e) {
    e.has("modelList") && this.modelListChange(this.modelList, e.get("modelList"));
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.removeChartRenamePopover();
  }
  modelListChange(e, t) {
    t?.forEach((i) => {
      i.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
    }), e?.forEach((i) => {
      i.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
    });
  }
  onAddChartClick(e) {
    e.stopImmediatePropagation(), this.selectedActionChartId = void 0, this.isChartRenamePopoverOpen && this.removeChartRenamePopover(), this.arcgisChartsConfigViewChartAddChart.emit({
      referenceElement: e.target,
      layerId: this.layer?.id.toString()
    });
  }
  buildChartList() {
    const e = this.modelList ? w(this.modelList, (t) => t.chartId, (t, i) => {
      const r = t.chartId, o = t.titleText, h = p(t.config);
      return a`<calcite-list-item .label=${o ?? r ?? this._messages.chartTitle} .selected=${this.selectedChartId === (r?.toString() ?? i.toString())} .value=${r ?? i.toString()} @click=${this.onChartSelect}><calcite-icon slot=content-start .icon=${h}></calcite-icon>${this.disableEditing ? null : a`<calcite-dropdown slot=actions-end overlay-positioning=fixed placement=bottom-end .open=${this.selectedActionChartId === r} @calciteDropdownClose=${() => this.chartActionClosed(r ?? "")} @calciteDropdownOpen=${() => this.chartActionOpened(r ?? "")} class=${c(n.dropdownPopup)}><calcite-action scale=l .text=${this._messages.chartActions ?? ""} slot=trigger .active=${r === this.selectedActionChartId}><calcite-icon icon=ellipsis></calcite-icon></calcite-action><calcite-dropdown-group selection-mode=none><calcite-dropdown-item accesskey=edit @calciteDropdownItemSelect=${this.chartEditSelect}>${this._messages.edit}</calcite-dropdown-item><calcite-dropdown-item accesskey=rename @click=${(l) => l.stopPropagation()} @calciteDropdownItemSelect=${this.chartRenameSelect}>${this._messages.rename}</calcite-dropdown-item><calcite-dropdown-item accesskey=delete @calciteDropdownItemSelect=${this.chartDeleteSelect}>${this._messages.delete}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`}</calcite-list-item>`;
    }) : null;
    return this.layer ? a`<div>${this.noGroup ? null : a`<p class=${c(n.header)}>${this.layer.title ?? this.layer.id.toString()}</p>`}${m(this.chartsOrderReorderCounter, a`<calcite-list label .dragEnabled=${!this.disableEditing} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${e}${this.disableEditing ? null : a`<div class=${c(n.addChartContainer)}><calcite-fab slot=fab appearance=outline-fill kind=neutral text-enabled .text=${this._messages.addChart} .label=${this._messages.addChart} @click=${this.onAddChartClick} scale=s></calcite-fab></div>`}</calcite-list>`)}</div>` : null;
  }
  onChartSelect(e) {
    const t = e.currentTarget;
    let i;
    t?.localName === "calcite-list-item" ? i = t.value : t?.localName === "calcite-icon" && (i = t.parentNode.value), this.arcgisChartsConfigViewChartSelect.emit({ chartId: i });
  }
  chartEditSelect() {
    this.disableEditing || (this.arcgisChartsConfigViewChartEdit.emit({
      chartId: this.selectedActionChartId
    }), this.chartActionClosed(this.selectedActionChartId));
  }
  chartRenameSelect(e) {
    if (!this.disableEditing) {
      const i = e.target.closest("calcite-list-item"), r = this.modelList?.find((o) => o.chartId === this.selectedActionChartId);
      i !== null && (this.renameReferenceElement = i), this.arcgisChartsConfigViewChartSelect.emit({
        chartId: this.selectedActionChartId
      }), this.chartTitle = r?.titleText ?? "", this.setupRenamePopover();
    }
  }
  chartDeleteSelect() {
    this.disableEditing || (this.arcgisChartsConfigViewChartDelete.emit({
      chartId: this.selectedActionChartId
    }), this.selectedActionChartId = "");
  }
  chartActionClosed(e) {
    e === this.selectedActionChartId && !this.isChartRenamePopoverOpen && (this.selectedActionChartId = void 0);
  }
  chartActionOpened(e) {
    this.selectedActionChartId = e;
  }
  setupRenamePopover() {
    this.isChartRenamePopoverOpen = !0, this.chartRenamePopover !== null && (this.chartRenamePopover.name = this.chartTitle, this.chartRenamePopover.referenceElement = this.renameReferenceElement), this.chartRenamePopover = u(a`<arcgis-charts-config-chart-rename-popover .name=${this.chartTitle} .referenceElement=${this.renameReferenceElement} .open=${this.isChartRenamePopoverOpen} @arcgisChartsConfigPopoverClose=${this.popoverClose} @arcgisChartsConfigChartRenamePopoverChange=${this.onChartRename}></arcgis-charts-config-chart-rename-popover>`), !document.body.contains(this.chartRenamePopover) && this.chartRenamePopover !== null && document.body.appendChild(this.chartRenamePopover);
  }
  removeChartRenamePopover() {
    this.chartRenamePopover !== null && (this.isChartRenamePopoverOpen = !1, this.chartRenamePopover = C(this.chartRenamePopover));
  }
  render() {
    return a`<div class=${c(n.viewChartComponent)}>${this.buildChartList()}</div>`;
  }
}
d("arcgis-charts-config-view-charts", R);
export {
  R as ArcgisChartsConfigViewCharts
};
