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';
const Categories = [
    'Basemaps',
    'Satellite Imagery',
    'Urban Aerial Photos',
    'Rural Aerial Photos',
    'Scanned Aerial Imagery Basemaps',
    'Scanned Aerial Imagery',
    'Event',
    'Bathymetry',
    'Elevation',
];
const ignoredLayers = new Set(['all']);
export class LayerSwitcherDropdown extends Component {
    constructor(p) {
        super(p);
        Object.defineProperty(this, "_events", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: []
        });
        Object.defineProperty(this, "onLayerChange", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: (opt) => {
                if (opt == null)
                    return;
                const layer = this.getLayer(opt.value);
                const [layerId, style] = opt.value.split('::');
                Config.map.setLayerId(layerId, style, layer?.pipeline, layer?.imageFormat);
                gaEvent("Ui" /* GaEvent.Ui */, 'layer:' + opt.value);
                // Configure the bounds of the map to match the new layer
                if (this.state.zoomToExtent) {
                    void Config.map.layers.then((f) => {
                        const layer = f.get(layerId);
                        if (layer == null)
                            return;
                        if (layer.upperLeft == null || layer.lowerRight == null)
                            return;
                        Config.map.emit('bounds', [layer.upperLeft, layer.lowerRight]);
                    });
                }
                window.history.pushState(null, '', `?${MapConfig.toUrl(Config.map)}`);
            }
        });
        Object.defineProperty(this, "onZoomExtentChange", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: (e) => {
                const target = e.target;
                this.setState({ zoomToExtent: target.checked });
            }
        });
        this.state = { zoomToExtent: true, currentLayer: 'unknown' };
    }
    componentDidMount() {
        this.setState({ zoomToExtent: true, currentLayer: Config.map.layerKey });
        void Config.map.layers.then((layers) => {
            this.setState({ layers });
            // This needs to run on next tick or the sate will not have updated
            setTimeout(() => this.ensurePipelineSet(), 10);
        });
        this._events.push(Config.map.on('layer', () => {
            this.setState({ currentLayer: Config.map.layerKey });
            // This needs to run on next tick or the sate will not have updated
            setTimeout(() => this.ensurePipelineSet(), 10);
        }), Config.map.on('tileMatrix', () => this.forceUpdate()));
    }
    /**
     * When the layers list load it contains more information like the default pipeline which is needed to create the tile XYZ url
     * so if the pipeline exists and its not set to the currently selected one update it
     */
    ensurePipelineSet() {
        const currentLayer = this.state.currentLayer;
        if (currentLayer == null)
            return;
        const layer = this.getLayer(currentLayer);
        if (layer?.pipeline) {
            const [layerId, style] = currentLayer.split('::');
            Config.map.setLayerId(layerId, style, layer.pipeline, layer.imageFormat);
        }
    }
    componentWillUnmount() {
        for (const e of this._events)
            e();
        this._events = [];
    }
    /**
     * lookup a layer from the liast of layers used to render the dropdown
     * @param layerId
     * @returns the layer or null if its not found
     */
    getLayer(layerId) {
        if (this.state.layers == null)
            return null;
        for (const layer of this.state.layers.values()) {
            if (layer.id === layerId)
                return layer;
        }
        return null;
    }
    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, classNamePrefix: "layer-selector", id: "layer-selector" }), _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() {
        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 (ignoredLayers.has(layer.id))
                continue;
            if (!layer.projections.has(Config.map.tileMatrix.projection.code))
                continue;
            const layerId = layer.category ?? 'Unknown';
            const layerCategory = categories.get(layerId) ?? { 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;
        }
        const orderedCategories = new Map([...categories].sort((a, b) => {
            const orderA = Categories.indexOf(a[0]);
            const orderB = Categories.indexOf(b[0]);
            if (orderA === orderB)
                return a[0].localeCompare(b[0]);
            if (orderA === -1 || orderA < orderB)
                return -1;
            return 1;
        }));
        return { options: [...orderedCategories.values()], current: current };
    }
}
//# sourceMappingURL=layer.switcher.dropdown.js.map