import { ref } from 'vue'
import maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
import { style } from '../style'

const zoom = ref(0)
export function useMapbox() {
  return {
    initMapbox,
    zoom,
  }
}

function initMapbox() {
  const map = new maplibregl.Map({
    container: 'place-earth', // container id
    // style: 'https://demotiles.maplibre.org/style.json', // style URL
    // style: '/style.json', // style URL
    style, // style URL

    center: [121, 19], // starting position [lng, lat]
    zoom: zoom.value,
  })

  map.on('load', function () {
    console.log(style)

    // map.addSource('openmaptiles', {
    //   type: 'vector',
    //   scheme: 'tms',
    //   tiles: ['http://192.168.10.187:8080/tmp/pbfMulti/{z}/{x}/{y}.pbf'],
    //   // tiles: [
    //   //   'https://api.maptiler.com/tiles/countries/{z}/{x}/{y}.pbf?key=bydP6fjhLOyifgD8sPeV',
    //   // ],
    //   glyphs:
    //     'https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=bydP6fjhLOyifgD8sPeV',
    //   sprite:
    //     'https://cloud.maptiler.com/api/v1/sprites/fc5c10f7-9003-43f2-bc30-3834f546927c/content',
    // })
    // style.layers.forEach(layer => {
    //   // console.log(layer)
    //   map.addLayer(layer)
    // })
  })

  map.on('zoom', () => {
    zoom.value = map.getZoom()
  })

  map.on('click', e => {
    const features = map.queryRenderedFeatures(e.point)
    console.log(features)
  })
}