import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import Select from 'react-select';
import { Config, gaEvent } from '../config.js';
import { MapConfig } from '../config.map.js';
export class LayerSwitcherDropdown extends Component {
    constructor() {
        super(...arguments);
        this._events = [];
        this.state = { zoomToExtent: true, currentLayer: 'unknown' };
        this.onLayerChange = (opt) => {
            if (opt == null)
                return;
            const [layerId, style] = opt.value.split('::');
            Config.map.setLayerId(layerId, style);
            gaEvent("Ui" /* GaEvent.Ui */, 'layer:' + opt.value);
            // Configure the bounds of the map to match the new layer
            if (this.state.zoomToExtent) {
                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)}`);
        };
        this.onZoomExtentChange = (e) => {
            const target = e.target;
            this.setState({ zoomToExtent: target.checked });
        };
    }
    componentDidMount() {
        this.setState({ zoomToExtent: true, currentLayer: Config.map.layerKey });
        Config.map.layers.then((layers) => this.setState({ layers }));
        this._events.push(Config.map.on('layer', () => this.setState({ currentLayer: Config.map.layerKey })), Config.map.on('tileMatrix', () => this.forceUpdate()));
    }
    componentWillUnmount() {
        for (const e of this._events)
            e();
        this._events = [];
    }
    render() {
        const ret = this.makeOptions();
        return (_jsxs("div", { className: "LuiDeprecatedForms", children: [_jsx("h6", { children: "Layers" }), _jsx(Select, { options: ret.options, onChange: this.onLayerChange, value: ret.current }), _jsx("div", { className: "lui-input-group-wrapper", children: _jsxs("div", { className: "lui-checkbox-container", children: [_jsx("input", { type: "checkbox", onChange: this.onZoomExtentChange, checked: this.state.zoomToExtent }), _jsx("label", { children: "Zoom to Extent" })] }) })] }));
    }
    makeOptions() {
        var _a, _b;
        if (this.state.layers == null || this.state.layers.size === 0)
            return { options: [], current: null };
        const categories = new Map();
        const currentLayer = this.state.currentLayer;
        let current = null;
        for (const layer of this.state.layers.values()) {
            if (!layer.projections.has(Config.map.tileMatrix.projection.code))
                continue;
            const layerId = (_a = layer.category) !== null && _a !== void 0 ? _a : 'Unknown';
            const layerCategory = (_b = categories.get(layerId)) !== null && _b !== void 0 ? _b : { label: layerId, options: [] };
            const opt = { value: layer.id, label: layer.name.replace(` ${layer.category}`, '') };
            layerCategory.options.push(opt);
            categories.set(layerId, layerCategory);
            if (layer.id === currentLayer)
                current = opt;
        }
        return { options: [...categories.values()], current: current };
    }
}
//# sourceMappingURL=layer.switcher.dropdown.js.map