import { h } from "@stencil/core";
import { _t } from "../i18n/i18n";
export class BasemapSwitcher {
  constructor() {
    this.basemapMakeSelection = (e) => this.setBasemap(e.detail.value);
  }
  componentWillLoad() {
    this.activeBasemap = this.getBasemapStyles().filter((style) => style.enabled)[0].url;
  }
  getBasemapStyles() {
    return Array.from(document.querySelectorAll("gl-style")).filter((style) => style.basemap);
  }
  setBasemap(url) {
    this.activeBasemap = url;
    this.getBasemapStyles().forEach((style) => (style.enabled = style.url === url));
  }
  render() {
    const header = _t("webmapgl.basemap-switcher.header");
    let items = this.getBasemapStyles().map((style) => (h("ion-item", null, style.thumbnail != undefined ? (h("ion-thumbnail", { slot: "start" }, h("img", { src: style.thumbnail, alt: style.name }))) : null, h("ion-radio", { value: style.url }, h("ion-label", { "text-wrap": true }, style.name)))));
    return (h("ion-content", null, h("ion-list", null, h("ion-radio-group", { onIonChange: this.basemapMakeSelection, value: this.activeBasemap }, h("ion-list-header", null, header), items))));
  }
  static get is() { return "gl-basemap-switcher"; }
}
//# sourceMappingURL=basemap-switcher.js.map
