/* eslint-disable no-unused-vars */
// Credits to https://gist.github.com/rclark/6908938
import L from 'leaflet'
import 'leaflet.vectorgrid'
// import { getParamString } from 'leaflet/src/core/Util'
import { toBounds } from 'leaflet/src/geometry/Bounds'
// import { TileLayer } from 'leaflet/src/layer/tile/TileLayer'
import Pbf from 'pbf'
import { VectorTile } from 'vector-tile'
import { PointSymbolizer } from 'leaflet.vectorgrid/src/Symbolizer.Point.js'
import { LineSymbolizer } from 'leaflet.vectorgrid/src/Symbolizer.Line.js'
import { FillSymbolizer } from 'leaflet.vectorgrid/src/Symbolizer.Fill.js'
L.VectorGrid.VectorPoi = L.VectorGrid.Protobuf.extend({
  onAdd(map) {
    // Triggered when the layer is added to a map.
    //   Register a click listener, then do all the upstream WMS things

    L.VectorGrid.Protobuf.prototype.onAdd.call(this, map)
    // map.on('click', this.getFeatureInfo, this)
    // map.on('click', this.getFeatureInfo, this)
    // map.on('popupopen', () => {
    //   console.log('poupopen')
    //   const btn = document.getElementById('tombol')
    //   if (btn) {
    //     btn.addEventListener('click', () => {
    //       console.log('klik')
    //     })
    //   }
    // })
  },

  onRemove(map) {
    // Triggered when the layer is removed from a map.
    //   Unregister a click listener, then do all the upstream WMS things
    L.VectorGrid.Protobuf.prototype.onRemove.call(this, map)
    // map.off('click', this.getFeatureInfo, this)
  },
  _createLayer: function (feat, pxPerExtent, layerStyle) {
    var layer
    switch (feat.type) {
      case 1:
        layer = new PointSymbolizer(feat, pxPerExtent)
        layer.getLatLng = null
        break
      case 2:
        layer = new LineSymbolizer(feat, pxPerExtent)
        break
      case 3:
        layer = new FillSymbolizer(feat, pxPerExtent)
        break
    }

    if (this.options.interactive) {
      layer.addEventParent(this)
    }

    return layer
  },
  _getVectorTilePromise: function (coords) {
    var data = {
      s: this._getSubdomain(coords),
      x: coords.x,
      y: coords.y,
      z: coords.z
      // 			z: this._getZoomForUrl()	/// TODO: Maybe replicate TileLayer's maxNativeZoom
    }
    if (this._map && !this._map.options.crs.infinite) {
      var invertedY = this._globalTileRange.max.y - coords.y
      if (this.options.tms) {
        // Should this option be available in Leaflet.VectorGrid?
        data['y'] = invertedY
      }
      data['-y'] = invertedY
    }

    var tileBounds = this._tileCoordsToNwSe(coords),
      // crs = this._crs,
      crs = this._map.options.crs,
      bounds = toBounds(crs.project(tileBounds[0]), crs.project(tileBounds[1])),
      min = bounds.min,
      max = bounds.max,
      bbox = (this._wmsVersion >= 1.3 && this._crs === EPSG4326 ? [min.y, min.x, max.y, max.x] : [min.x, min.y, max.x, max.y]).join(',')
    // url = TileLayer.prototype.getTileUrl.call(this, coords)
    const wmsParams = this.options.wmsParams
    // var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
    // const size = this._map.getSize()
    // wmsParams.height = size.y
    // wmsParams.width = size.x
    const urlTemp = this._url + L.Util.getParamString(wmsParams, this._url, true)
    // var tileUrl = urlTemp + '&bbox=' + bbox
    // var tileUrl = L.Util.template(this._url, L.extend(data, this.options))
    var tileUrl = L.Util.template(urlTemp + '&bbox=' + bbox, L.extend(data, this.options))
    return fetch(tileUrl, this.options.fetchOptions)
      .then(function (response) {
        if (!response.ok) {
          return { layers: [] }
        }

        return response.blob().then(function (blob) {
          // 				console.log(blob);

          var reader = new FileReader()
          return new Promise(function (resolve) {
            reader.addEventListener('loadend', function () {
              // reader.result contains the contents of blob as a typed array

              // blob.type === 'application/x-protobuf'
              var pbf = new Pbf(reader.result)
              // console.log(pbf)
              return resolve(new VectorTile(pbf))
            })
            reader.readAsArrayBuffer(blob)
          })
        })
      })
      .then(function (json) {
        // console.log(json)
        // console.log('Vector tile:', json.layers)
        // 			console.log('Vector tile water:', json.layers.water);	// Instance of VectorTileLayer

        // Normalize feature getters into actual instanced features
        for (var layerName in json.layers) {
          var feats = []

          for (var i = 0; i < json.layers[layerName].length; i++) {
            var feat = json.layers[layerName].feature(i)
            feat.geometry = feat.loadGeometry()
            feat.latlng = feat.loadGeometry()
            // console.log(feat)
            feats.push(feat)
          }

          json.layers[layerName].features = feats
        }

        return json
      })
  }
})

L.vectorGrid.vectorpoi = function (url, options) {
  return new L.VectorGrid.VectorPoi(url, options)
}