import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Stamen from 'ol/source/Stamen.js';

import amtrakLayer from './amtrak/layer.js';
import arenasLayer from './nhl-arenas/layer.js';

const layerCategories = [
    {
        name: "Base maps",
        // TODO: include more?
        // - [ ] https://mc.bbbike.org/mc/
        // - [ ] https://www.thunderforest.com/pricing/
        layers: [
            {
                name: "OpenStreetMap Carto (Raster)",
                enabled: true,
                layer: new TileLayer({
                    source: new OSM(),
                }),
            },
            {
                name: "CyclOSM (Raster)",
                layer: new TileLayer({
                    source: new OSM({
                        url: "https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png", // TODO: {s}
                    }),
                }),
            },
            {
                name: "Stamen Watercolor (Raster)",
                layer: new TileLayer({
                    source: new Stamen({
                        layer: 'watercolor',
                    }),
                }),
            },
            {
                name: "Stamen Toner (Raster)",
                layer: new TileLayer({
                    source: new Stamen({
                        layer: 'toner',
                    }),
                }),
            },
        ],
    },
    {
        name: "Overlays",
        layers: [
            {
                name: "Amtrak Routes",
                layer: amtrakLayer,
            },
            {
                name: "NHL Arenas",
                layer: arenasLayer,
            },
        ]
    }
];

export default layerCategories;