import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';
import { Component } from 'solid-js';

interface TileProvider {
  name: string;
  language: string;
  source: XYZ;
}

type TileProviders = {
  [key: string]: TileProvider;
};

export const mapTileProviders: TileProviders = {
  osm: {
    name: 'Open Street Map',
    language: 'int',
    source: new OSM(),
  },
  osmfr: {
    name: 'Open Street Map France',
    language: 'fr',
    source: new XYZ({
      minZoom: 0,
      maxZoom: 20,
      url: 'https://{a-c}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
    }),
  },
  otm: {
    name: 'Open Topo Map',
    language: 'int',
    source: new XYZ({
      minZoom: 0,
      maxZoom: 20,
      url: 'https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png',
    }),
  },
  cyclosm: {
    name: 'CyclOSM',
    language: 'int',
    source: new XYZ({
      minZoom: 0,
      maxZoom: 19,
      url: 'https://{a-c}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
    }),
  },
  //https://b.tile.openstreetmap.fr/openriverboatmap/20/535762/382966.png
  openriverboatmap: {
    name: 'Open River Boat Map',
    language: 'int',
    source: new XYZ({
      minZoom: 0,
      maxZoom: 19,
      url: 'https://{a-c}.tile.openstreetmap.fr/openriverboatmap/{z}/{x}/{y}.png',
    }),
  },
};

const MapTilesProvider: Component<{}> = (props) => {
  return <div></div>;
};

export default MapTilesProvider;