/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c } from "../../chunks/runtime.js";
import { u as h } from "../../chunks/useT9n.js";
import { css as m, html as s } from "lit";
import { createRef as n, ref as r } from "lit-html/directives/ref.js";
import { LitElement as f, createEvent as p, safeClassMap as d, safeStyleMap as b } from "@arcgis/lumina";
const u = m`:host{display:block;--solutions-theme-foreground-color: var(--calcite-color-surface-2);width:100%}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-bottom-width:1px!important;border-width:0px}.border-bottom-2{border-bottom-width:2px!important;border-width:0px}.border-solid{border-style:solid;border-color:var(--calcite-color-border-3)}.border-left-right{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.action-bar-size{height:51px;width:100%}.map-list{display:flex;flex-direction:column;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-color-surface-1);z-index:1000}.display-none{display:none}.adjusted-height{max-height:calc(100% - 68px);overflow-y:auto}.position-absolute{position:absolute}.position-relative{position:relative}.popover-map-list{overflow:auto;width:250px}.max-width-200{max-width:200px}.min-width-150{min-width:150px}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}`;
class _ extends f {
  constructor() {
    super(), this.mapInfos = [], this.isMapLayout = !1, this.showMapListInPopover = !1, this.referenceElement = "", this.selectedWebMapId = "", this._mapListExpanded = !1, this._isValidWebMap = !0, this._translations = h({ name: "map-picker", blocking: !0 }), this._list = n(), this._loadedId = "", this._skipEditCheck = !1, this._popover = n(), this._mapPickerButton = n(), this.beforeMapInfoChange = p(), this.mapInfoChange = p(), this.listenOn(window, "mapChanged", this.mapChanged);
  }
  static {
    this.properties = { mapInfos: 0, isMapLayout: 5, height: 9, showMapListInPopover: 5, referenceElement: 1, selectedWebMapId: 1, _mapListExpanded: 16, _isValidWebMap: 16, _translations: 16 };
  }
  static {
    this.styles = u;
  }
  willUpdate(t) {
    t.has("mapInfos") && this.hasUpdated && this.mapInfosWatchHandler(this.mapInfos, t.get("mapInfos")), t.has("selectedWebMapId") && this.hasUpdated && this.selectedWebMapIdWatchHandler(this.selectedWebMapId);
  }
  _webMapInfoWatchHandler(t, e) {
    t && JSON.stringify(t) !== JSON.stringify(e) && (this._loadedId = t?.id, this.mapInfoChange.emit(t));
  }
  async mapInfosWatchHandler(t, e) {
    if (t && JSON.stringify(t) !== JSON.stringify(e)) {
      const i = this._getWebMapInfo();
      this._webMapSelected(i);
    }
  }
  async selectedWebMapIdWatchHandler(t) {
    this._loadedId = t;
  }
  async setMapByID(t, e = !1) {
    this._skipEditCheck = e;
    const i = this.mapInfos?.filter((a) => a.id === t);
    t && i?.length > 0 && this._webMapSelected(i[0]), this._skipEditCheck = !1;
  }
  async close() {
    this._mapListExpanded && (this._mapListExpanded = !1);
  }
  async toggle(t) {
    this._mapListExpanded = t;
  }
  async mapChanged(t) {
    const e = t.detail.isValid;
    this._isValidWebMap = e;
  }
  render() {
    return s`${!this.showMapListInPopover && this._getToolbar() || ""}${this.showMapListInPopover ? this._getMapListPopover() : this._getMapNameList(this._mapListExpanded)}`;
  }
  loaded() {
    const t = this._getWebMapInfo();
    t && this._webMapSelected(t);
  }
  _getMapPicker() {
    const t = "map-picker-expand-toggle", e = this._mapListExpanded ? "chevron-up" : "chevron-down", i = this.isMapLayout ? "" : "position-absolute", a = this.isMapLayout ? "max-width-200" : "width-full", l = this._isValidWebMap ? "map" : "exclamation-mark-triangle";
    return s`<div class=${d(a)}><calcite-button alignment=icon-end-space-between appearance=transparent class=${`width-full height-full ${i}`} .iconEnd=${e} .iconStart=${l} id=${t} kind=neutral @click=${() => this._chooseMap()} width=full ${r(this._mapPickerButton)}>${this._getWebMapInfo().name}</calcite-button><calcite-tooltip placement=bottom .referenceElement=${t}><span>${this._translations.switchMap}</span></calcite-tooltip></div>`;
  }
  _getToolbar() {
    const t = this.isMapLayout ? "border-bottom-1" : "border-bottom-2", e = this.isMapLayout ? "" : "position-relative";
    return s`<div class=${`display-flex border-left-right ${e}`}><calcite-action-bar class=${`border-solid action-bar-size overflow-hidden ${t}`} expand-disabled layout=horizontal slot=header>${this._getMapPicker()}${this._updateMapPickerIconColor()}</calcite-action-bar></div>`;
  }
  _updateMapPickerIconColor() {
    this._mapPickerButton.value?.componentOnReady().then(() => {
      const e = this._mapPickerButton.value?.shadowRoot?.lastChild;
      let i = null;
      if (e && e instanceof HTMLElement) {
        const a = e.getElementsByClassName("icon icon--start");
        a.length > 0 && (i = a[0]);
      }
      i && (this._isValidWebMap ? i.style.setProperty("color", "var(--calcite-color-text-1)") : i.style.setProperty("color", "var(--calcite-color-status-danger)"));
    });
  }
  _getMapNameList(t) {
    const e = this.showMapListInPopover ? "position-relative" : "position-absolute", i = this.isMapLayout ? "max-width-200 min-width-150" : "width-full", a = this.isMapLayout ? "border-bottom-1" : "border-bottom-2", l = t ? `map-list border-solid ${a} adjusted-height ${i} ${e}` : "display-none";
    return s`<div class=${d(l)}><calcite-list id=mapList .label=${this._translations.mapList} selection-appearance=border selection-mode=single-persist ${r(this._list)}>${this.mapInfos.map((o) => s`<calcite-list-item .label=${o.name} @click=${() => this._webMapSelected(o)} .selected=${o.id === this._loadedId} .value=${o.id}></calcite-list-item>`)}</calcite-list></div>`;
  }
  _getMapListPopover() {
    const t = this.height && this.height > 0 && this.showMapListInPopover ? { "max-height": `${this.height.toString()}px` } : {};
    return s`<calcite-popover auto-close .label=${this._translations.mapList} placement=left .referenceElement=${this.referenceElement} ${r(this._popover)}><div style=${b(t)} class=popover-map-list>${this._getMapNameList(!0)}</div></calcite-popover>`;
  }
  _getWebMapInfo() {
    let t = this.mapInfos.find((e) => this.selectedWebMapId === e.id);
    if (!t && this.mapInfos.length > 0 && (t = this.mapInfos[0]), !t)
      throw new Error("No valid web map info available");
    return t;
  }
  _webMapSelected(t) {
    const e = this._loadedId;
    this._loadedId = t.id;
    let i = !1;
    this._skipEditCheck ? i = !0 : this.beforeMapInfoChange.emit({
      currentId: e,
      mapInfo: t,
      ref: this.el
    }).defaultPrevented || (i = !0), i && (this._webMapInfoWatchHandler(t, this._webMapInfo), this._webMapInfo = t), this._popover.value && (this._popover.value.open = !1), this._mapListExpanded = !1;
  }
  _chooseMap() {
    this._mapListExpanded = !this._mapListExpanded;
  }
}
c("map-picker", _);
export {
  _ as MapPicker
};
