/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as y } from "../../chunks/runtime.js";
import { d, a as m, c as p } from "../../chunks/mapViewUtils.js";
import * as o from "@arcgis/core/intl.js";
import { u as f } from "../../chunks/useT9n.js";
import { css as L, html as a } from "lit";
import { LitElement as u, createEvent as h, noShadowRoot as w } from "@arcgis/lumina";
import * as g from "@arcgis/core/core/reactiveUtils.js";
async function _(n, t) {
  const { style: i = "decimal", places: e = 2 } = t || {}, s = o.convertNumberFormatToIntlOptions({
    places: e,
    digitSeparator: !0
  });
  return s.style = i, o.formatNumber(n, s);
}
const x = L`@layer{:host{display:block}.notice-msg{width:calc(100% - 20px);padding:10px}.layer-name{font-weight:500;word-break:break-word}.feature-count{padding:0 10px}}`;
class I extends u {
  constructor() {
    super(), this.layers = [], this.showFeatureCount = !0, this.showNextIcon = !1, this.applyLayerViewFilter = !1, this.filterByMapExtent = !1, this._noLayersToDisplay = !1, this._mapLayerIds = [], this._isLoading = !1, this._translations = f({ name: "layer-list", blocking: !0 }), this.layerSelect = h(), this.layersListLoaded = h(), this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated);
  }
  static {
    this.properties = { mapView: 0, layers: 0, showFeatureCount: 5, showNextIcon: 5, applyLayerViewFilter: 5, filterByMapExtent: 5, _noLayersToDisplay: 16, _mapLayerIds: 16, _isLoading: 16, _translations: 16 };
  }
  static {
    this.styles = x;
  }
  static {
    this.shadowRootOptions = w;
  }
  willUpdate(t) {
    t.has("filterByMapExtent") && this.hasUpdated && this.filterByMapExtentWatchHandler(this.filterByMapExtent);
  }
  filterByMapExtentWatchHandler(t) {
    t ? this.initializeMapExtentFilter() : this._filterByMapExtentHandle && this._filterByMapExtentHandle.remove();
  }
  async refresh() {
    await this.setLayers();
  }
  async selectedLanguageUpdated(t) {
    await this.setLayers();
  }
  async load() {
    this.filterByMapExtent && this.initializeMapExtentFilter();
  }
  async loaded() {
    await this.setLayers();
  }
  render() {
    return a`${this._isLoading && a`<calcite-loader label scale=m></calcite-loader>` || ""}${!this._isLoading && this.mapView && this._noLayersToDisplay && a`<calcite-notice class="notice-msg" icon=layers-reference kind=danger open><div slot=title>${this._translations.error}</div><div slot=message>${this._translations.noLayerToDisplayErrorMsg}</div></calcite-notice>` || ""}${!this._isLoading && this.mapView && a`<calcite-list label selection-appearance=border selection-mode=none>${this.filterByMapExtent && this._mapLayerIds.length > 0 && this.getExtentNotice() || ""}${this.renderLayerList()}</calcite-list>` || ""}`;
  }
  initializeMapExtentFilter() {
    this._filterByMapExtentHandle = g.when(() => this.mapView?.stationary, () => {
      this.setLayers();
    }, {
      initial: !0
    });
  }
  async setLayers() {
    this.mapView && (this._isLoading = !0, await this.initLayerHash(), this._isLoading = !1);
  }
  async initLayerHash() {
    const t = [];
    if (this.mapView) {
      this._layerItemsHash = await d(this.mapView, !1);
      const i = await m(this.mapView);
      for (const e of i)
        if (e?.type === "feature" && this.showFeatureCount) {
          const s = e.createQuery();
          if (e?.definitionExpression && (s.where = s.where + " AND " + e.definitionExpression), this.applyLayerViewFilter) {
            const r = await p(this.mapView, e.id);
            r?.filter?.where && (s.where = s.where ? s.where + " AND " + r.filter.where : r.filter.where);
          }
          s.geometry = this.filterByMapExtent ? this.mapView.extent : null;
          const l = e.queryFeatureCount(s);
          t.push(l), l.then(async (r) => {
            const c = Number.isNaN(r) ? "" : await _(r, {
              places: 0,
              style: "decimal"
            });
            this._layerItemsHash?.[e.id] && (this._layerItemsHash[e.id].formattedFeatureCount = c);
          });
        }
      await Promise.all(t).then(() => {
        const e = this._layerItemsHash && this.getLayersToBeShownInList(this._layerItemsHash);
        this._mapLayerIds = e?.reverse() || [], this.handleNoLayersToDisplay();
      }, () => {
        this._mapLayerIds = [], this.handleNoLayersToDisplay();
      });
    }
  }
  handleNoLayersToDisplay() {
    this._noLayersToDisplay = !(this._mapLayerIds.length > 0), this.layersListLoaded.emit(this._mapLayerIds);
  }
  getLayersToBeShownInList(t) {
    const i = this.layers?.length > 0 ? this.layers : [];
    return Object.keys(t).reduce((e, s) => (i.indexOf(s) > -1 && e.push(s), e), []);
  }
  renderLayerList() {
    return this._mapLayerIds.length > 0 ? this._mapLayerIds.reduce((t, i) => {
      if (this._layerItemsHash && this._layerItemsHash[i]) {
        const e = this.getLayerListItem(i);
        e && t.push(e);
      }
      return t;
    }, []) : void 0;
  }
  getLayerListItem(t) {
    const i = this._layerItemsHash && this._layerItemsHash[t].name, e = this._layerItemsHash && this._layerItemsHash[t].formattedFeatureCount;
    return a`<calcite-list-item @calciteListItemSelect=${() => {
      this.onLayerItemSelected(t);
    }}><div class="layer-name" slot=content-start>${i}</div>${this.showFeatureCount && e !== void 0 && e !== "" && a`<div class="feature-count" slot=content-end>${`(${e})`}</div>` || ""}${this.showNextIcon && a`<calcite-icon aria-hidden=true flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` || ""}</calcite-list-item>`;
  }
  getExtentNotice() {
    return a`<calcite-notice class="notice-msg" icon=extent-filter kind=brand open scale=s><div slot=message>${this._translations.extentFilterMsg}</div></calcite-notice>`;
  }
  onLayerItemSelected(t) {
    this._layerItemsHash && this.layerSelect.emit({ layerId: t, layerName: this._layerItemsHash[t]?.name });
  }
}
y("layer-list", I);
export {
  I as LayerList
};
