import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { Component, Fragment } from 'preact';
import { Config, gaEvent } from '../config.js';
import { MapConfig } from '../config.map.js';
export class LayerSwitcherDropdown extends Component {
    constructor() {
        super(...arguments);
        this._events = [];
        this.onChange = (e) => {
            const target = e.target;
            const [layerId, style] = target.value.split('::');
            Config.map.setLayerId(layerId, style);
            gaEvent("Ui" /* Ui */, 'layer:' + target.value);
            // Configure the bounds of the map to match the new layer
            Config.map.layers.then((f) => {
                const layer = f.get(layerId);
                if (layer == null)
                    return;
                Config.map.emit('bounds', [layer.upperLeft, layer.lowerRight]);
            });
            window.history.pushState(null, '', `?${MapConfig.toUrl(Config.map)}`);
        };
    }
    componentWillMount() {
        this.setState({ ...this.state, currentLayer: Config.map.layerKey });
        Config.map.layers.then((layers) => this.setState({ ...this.state, layers }));
        this._events.push(Config.map.on('layer', () => this.setState({ ...this.state, currentLayer: Config.map.layerKey })), Config.map.on('tileMatrix', () => this.setState(this.state)));
    }
    componentWillUnmount() {
        for (const e of this._events)
            e();
        this._events = [];
    }
    render() {
        return (_jsxs("div", { class: "LuiDeprecatedForms", children: [_jsx("h6", { children: "Layers" }), _jsx("select", { onChange: this.onChange, value: this.state.currentLayer, children: this.renderAerialLayers() })] }));
    }
    renderAerialLayers() {
        var _a, _b, _c;
        if (this.state.layers == null || this.state.layers.size === 0)
            return;
        const categories = new Map();
        for (const layer of this.state.layers.values()) {
            if (!layer.projections.has(Config.map.tileMatrix.projection.code))
                continue;
            const layerCategory = (_b = categories.get((_a = layer.category) !== null && _a !== void 0 ? _a : 'Unknown')) !== null && _b !== void 0 ? _b : [];
            layerCategory.push(_jsx("option", { value: layer.id, children: layer.name.replace(` ${layer.category}`, '') }));
            categories.set((_c = layer.category) !== null && _c !== void 0 ? _c : 'Unknown', layerCategory);
        }
        if (categories.size === 0)
            return;
        const output = [];
        for (const [layerName, layers] of categories.entries()) {
            if (layers.length === 0)
                continue;
            output.push(_jsxs("optgroup", { label: layerName, children: [...layers] }));
        }
        return _jsx(Fragment, { children: output });
    }
}
//# sourceMappingURL=layer.switcher.dropdown.js.map