import { TileLayer } from 'maptalks'

let tiles = [
  new TileLayer('base', {
    'offset': [100000, 10000],
    'urlTemplate': function(x, y, z, domain) {
      for (var a = "", c = x, d = y, e = 0; e < z; e++) {
        a = ((c & 1) + 2 * (d & 1)).toString() + a;
        c >>= 1;
        d >>= 1
      }
      return 'http://dynamic.t'+domain+'.tiles.ditu.live.com/comp/ch/' + a + '?it=G,VE,BX,L,LA&mkt=zh-cn,syr&n=z&og=111&ur=CN&cstl=w4c'
    },
    'subdomains': ['0', '1', '2', '3']
  }),
  new TileLayer('base', {
    'urlTemplate': 'https://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png',
    'subdomains': ['a', 'b', 'c']
  }),
  new TileLayer('base', {
    'urlTemplate': 'http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png',
    'subdomains': ['a', 'b', 'c']
  }),
  new TileLayer('base', {
    'urlTemplate': 'http://{s}.tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png',
    'subdomains': ['a', 'b', 'c']
  }),

  new TileLayer('base', {
    'urlTemplate': 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    'subdomains': ['a', 'b', 'c']
  }),
  new TileLayer('Carto light', {
    'urlTemplate': 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
    'subdomains': ['a', 'b', 'c', 'd']
  }),
  new TileLayer('Carto dark', {
    'urlTemplate': 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
    'subdomains': ['a', 'b', 'c', 'd']
  }),
  new TileLayer('base', {
    spatialReference: {
      projection: 'EPSG:3857'
    },
    urlTemplate: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    subdomains: ['a', 'b', 'c'],
    attribution: '&copy; <a href="http://www.osm.org" target="_blank">OpenStreetMap</a> contributors'
  })
]
let index = localStorage.getItem('theme') || 1

let theme = document.querySelector('#theme')

theme.innerHTML = tiles.map((t, i) => `<option value="${i}">主题${i+1}</option>`).join('')
theme.value = index

theme.addEventListener('change', () => {
  localStorage.setItem('theme', theme.value)
  location.reload()
})

export default () => {
  return tiles[index]
}