import { jsx as _jsx } from "react/jsx-runtime";
import maplibre from 'maplibre-gl';
import { Component } from 'react';
import { Config, gaEvent } from '../config.js';
import { MapConfig } from '../config.map.js';
import { getTileGrid } from '../tile.matrix.js';
import { onMapLoaded } from './map.js';
export class MapSwitcher extends Component {
    constructor() {
        super(...arguments);
        Object.defineProperty(this, "_events", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: []
        });
        Object.defineProperty(this, "map", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        Object.defineProperty(this, "el", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        Object.defineProperty(this, "currentStyle", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        Object.defineProperty(this, "_updateTimer", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: null
        });
        Object.defineProperty(this, "update", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: () => {
                if (this._updateTimer != null)
                    return;
                this._updateTimer = setTimeout(this.updateMap, 1_000);
            }
        });
        Object.defineProperty(this, "updateMap", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: () => {
                this._updateTimer = null;
                const location = Config.map.transformedLocation;
                const target = this.getStyleType();
                const styleId = `${target.layerId}::${target.style}`;
                if (this.currentStyle !== styleId) {
                    const tileGrid = getTileGrid(Config.map.tileMatrix.identifier);
                    const style = tileGrid.getStyle({ layerId: target.layerId, style: target.style });
                    this.currentStyle = styleId;
                    this.map.setStyle(style);
                }
                this.map.setZoom(Math.max(location.zoom - 4, 0));
                this.map.setCenter([location.lon, location.lat]);
                this.map.setBearing(Config.map.location.bearing ?? 0);
                this.map.setPitch(Config.map.location.pitch ?? 0);
                this.forceUpdate();
            }
        });
        Object.defineProperty(this, "switchLayer", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: () => {
                // Both a click event and layer switch even will be fired from this action
                gaEvent("Ui" /* GaEvent.Ui */, 'map-switcher:click');
                const target = this.getStyleType();
                Config.map.setLayerId(target.layerId, target.style);
                this.updateMap();
                window.history.pushState(null, '', `?${MapConfig.toUrl(Config.map)}`);
            }
        });
    }
    componentDidMount() {
        // Force the URL to be read before loading the map
        Config.map.updateFromUrl();
        this.el = document.getElementById('map-switcher-map');
        if (this.el == null)
            return;
        const cfg = Config.map;
        const tileGrid = getTileGrid(cfg.tileMatrix.identifier);
        const target = this.getStyleType();
        this.currentStyle = `${target.layerId}::${target.style}`;
        const style = tileGrid.getStyle({ layerId: target.layerId, style: target.style });
        const location = cfg.transformedLocation;
        this.map = new maplibre.Map({
            container: this.el,
            style,
            center: [location.lon, location.lat], // starting position [lon, lat]
            zoom: location.zoom, // starting zoom
            bearing: cfg.location.bearing ?? 0,
            pitch: cfg.location.pitch ?? 0,
            attributionControl: false,
        });
        onMapLoaded(this.map, () => {
            this._events.push(Config.map.on('location', this.update), Config.map.on('tileMatrix', this.update), Config.map.on('layer', this.update), Config.map.on('bounds', this.update));
            this.updateMap();
        });
    }
    componentWillUnmount() {
        if (this.map)
            this.map.remove();
        for (const e of this._events)
            e();
    }
    getStyleType() {
        if (Config.map.layerId !== 'aerial')
            return { layerId: 'aerial' };
        return { layerId: 'topographic', style: 'topographic' };
    }
    render() {
        const layerTitle = `Switch map to ${this.getStyleType().layerId}`;
        return (_jsx("div", { id: "map-switcher", className: "map-switcher", onClick: this.switchLayer, title: layerTitle, children: _jsx("div", { id: "map-switcher-map", style: { width: '100%', height: '100%', pointerEvents: 'none' } }) }));
    }
}
//# sourceMappingURL=map.switcher.js.map