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: '<div class="home">4维时代版权所有</div>'
  }),
  new TileLayer('base', {
    // spatialReference: {
    //   projection: 'EPSG:3857'
    // },
    urlTemplate: 'http://139.159.231.141:8180/{z}_{x}_{y}.png',
    subdomains: ['a', 'b', 'c'],
    attribution: '<div class="home">4维时代版权所有</div>'
  })
]
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[theme.value]
}