import { h } from '../webmapgl.core.js';

import { a as _t } from './chunk-cf921ba9.js';

class BasemapSwitcher {
    getBasemapStyles() {
        return Array.from(document.querySelectorAll('gl-style'))
            .filter((style) => style.basemap);
    }
    setBasemap(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) ?
                h("ion-thumbnail", { slot: "start" },
                    h("img", { src: style.thumbnail, alt: style.name })) : null,
            h("ion-label", { "text-wrap": true }, style.name),
            h("ion-radio", { checked: style.enabled, value: style.url }))));
        return (h("ion-content", null,
            h("ion-list", null,
                h("ion-radio-group", { onIonChange: (e) => this.setBasemap(e.detail.value) },
                    h("ion-list-header", null, header),
                    items))));
    }
    static get is() { return "gl-basemap-switcher"; }
}

class Basemaps {
    async openPopover(ev) {
        const options = {
            component: document.createElement('gl-basemap-switcher'),
            ev: ev
        };
        const popover = await this.popoverCtrl.create(options);
        await popover.present();
        return popover;
    }
    render() {
        let title = _t('webmapgl.basemaps.title');
        return (h("ion-button", { onClick: (e) => this.openPopover(e), title: title },
            h("ion-icon", { slot: "icon-only", name: 'globe' })));
    }
    static get is() { return "gl-basemaps"; }
    static get properties() { return {
        "el": {
            "elementRef": true
        },
        "popoverCtrl": {
            "connect": "ion-popover-controller"
        }
    }; }
}

export { BasemapSwitcher as GlBasemapSwitcher, Basemaps as GlBasemaps };
