import VectorLayer from 'ol/layer/Vector';
import {Vector as VectorSource} from 'ol/source.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import states from './states.js';

import {Style, Fill, Text, Stroke} from 'ol/style.js';

let layers = [];
for (let [name, state] of Object.entries(states)) {
    const vectorLayer = new VectorLayer({
        source: new VectorSource({
            url: state,
            format: new GeoJSON,
        }),
        style: function(feature){
            return new Style({
                text: new Text({
                    text: feature.get('center'),
                }),
                fill: new Fill({
                    color: 'rgba(255,255,255,0.4)',
                }),
                stroke: new Stroke({
                    color: '#3399CC',
                    width: 1.25,
                }),
            });
        }
    });
    layers.push({
        name: name + ' UPS',
        layer: vectorLayer,
    });
}

layers.sort((a, b) => a.name > b.name ? 1 : -1); // Names are always unique

export default {name: "UPS Service Areas (stale 2023-06 data)", layers};