import { jsx as _jsx } from "react/jsx-runtime";
import maplibre from 'maplibre-gl';
import { Component } from 'react';
import { Config } 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);
        this._events = [];
        this._updateTimer = null;
        this.update = () => {
            if (this._updateTimer != null)
                return;
            this._updateTimer = setTimeout(this.updateMap, 1000);
        };
        this.updateMap = () => {
            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(target.layerId, 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.forceUpdate();
        };
        this.switchLayer = () => {
            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(target.layerId, target.style);
        const location = cfg.transformedLocation;
        this.map = new maplibre.Map({
            container: this.el,
            style,
            center: [location.lon, location.lat],
            zoom: location.zoom,
            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