/* eslint-disable no-unused-vars */
import React, { useEffect, useMemo, useRef, useState } from 'react'
import { useLeafletContext } from '@react-leaflet/core'
import L from 'leaflet'
import 'leaflet.vectorgrid'
import '../generalWms/L.VectorGrid.VectorPoi'
import { useMap } from 'react-leaflet'

function getVectorStyles(layerName, fieldName) {
  const style = {}
  style[layerName] = function (properties, zoom) {
    const p = properties[fieldName]
    return {
      color: p < 0.001 ? 'transparent' : p < 5 ? '#800026' : p < 15 ? '#E31A1C' : p < 30 ? '#FEB24C' : '#00ff00',
      fillOpacity: 0.2,
      //   fillOpacity: 1,
      stroke: true,
      fill: true,
      //opacity: 0.2,
      weight: 3
    }
  }
  return style
}

export const Styles = {
  water: {
    fill: true,
    weight: 1,
    fillColor: '#06cccc',
    color: '#06cccc',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  admin: {
    weight: 1,
    fillColor: 'pink',
    color: 'pink',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  waterway: {
    weight: 1,
    fillColor: '#2375e0',
    color: '#2375e0',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  landcover: {
    fill: true,
    weight: 1,
    fillColor: '#53e033',
    color: '#53e033',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  landuse: {
    fill: true,
    weight: 1,
    fillColor: '#e5b404',
    color: '#e5b404',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  park: {
    fill: true,
    weight: 1,
    fillColor: '#84ea5b',
    color: '#84ea5b',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  boundary: {
    weight: 1,
    fillColor: '#c545d3',
    color: '#c545d3',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  aeroway: {
    weight: 1,
    fillColor: '#51aeb5',
    color: '#51aeb5',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  road: {
    // mapbox & nextzen only
    weight: 1,
    fillColor: '#f2b648',
    color: '#f2b648',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  tunnel: {
    // mapbox only
    weight: 0.5,
    fillColor: '#f2b648',
    color: '#f2b648',
    fillOpacity: 0.2,
    opacity: 0.4
    // 					dashArray: [4, 4]
  },
  bridge: {
    // mapbox only
    weight: 0.5,
    fillColor: '#f2b648',
    color: '#f2b648',
    fillOpacity: 0.2,
    opacity: 0.4
    // 					dashArray: [4, 4]
  },
  transportation: {
    // openmaptiles only
    weight: 0.5,
    fillColor: '#f2b648',
    color: '#f2b648',
    fillOpacity: 0.2,
    opacity: 0.4
    // 					dashArray: [4, 4]
  },
  transit: {
    // nextzen only
    weight: 0.5,
    fillColor: '#f2b648',
    color: '#f2b648',
    fillOpacity: 0.2,
    opacity: 0.4
    // 					dashArray: [4, 4]
  },
  building: {
    fill: true,
    weight: 1,
    fillColor: '#2b2b2b',
    color: '#2b2b2b',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  water_name: {
    weight: 1,
    fillColor: '#022c5b',
    color: '#022c5b',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  transportation_name: {
    weight: 1,
    fillColor: '#bc6b38',
    color: '#bc6b38',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  place: {
    weight: 1,
    fillColor: '#f20e93',
    color: '#f20e93',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  housenumber: {
    weight: 1,
    fillColor: '#ef4c8b',
    color: '#ef4c8b',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  poi: {
    weight: 1,
    fillColor: '#3bb50a',
    color: '#3bb50a',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  kpdl_npwp_tidak_valid: {
    weight: 1,
    fillColor: '#3bb50a',
    color: '#3bb50a',
    fillOpacity: 0.2,
    opacity: 0.4
  },
  earth: {
    // nextzen only
    fill: true,
    weight: 1,
    fillColor: '#c0c0c0',
    color: '#c0c0c0',
    fillOpacity: 0.2,
    opacity: 0.4
  },

  // Do not symbolize some stuff for mapbox
  country_label: [],
  marine_label: [],
  state_label: [],
  place_label: [],
  waterway_label: [],
  poi_label: [],
  road_label: [],
  housenum_label: [],

  // Do not symbolize some stuff for openmaptiles
  country_name: [],
  marine_name: [],
  state_name: [],
  place_name: [],
  waterway_name: [],
  poi_name: [],
  road_name: [],
  housenum_name: []
}

export const PoiKpdl = () => {
  const context = useLeafletContext()
  // const { map } = context
  const map = useMap()

  const providerUrl = `http://localhost:8080/geoserver/wms?REQUEST=GetMap
            &SERVICE=WMS&VERSION=1.1.0&FORMAT=application/vnd.mapbox-vector-tile&STYLES=&TRANSPARENT=true
            &LAYERS=matoa:kpdl_npwp_tidak_valid
            &TILED=false&WIDTH=256&HEIGHT=256&CRS=EPSG:3857`

  const vectorGrid = useMemo(() => {
    const options = {
      interactive: true,
      type: 'protobuf',
      vectorTileLayerStyles: {
        kpdl_npwp_tidak_valid: {
          // weight: 2,
          fillColor: '#3388ff',
          color: '#f20e93',
          fillOpacity: 1,
          opacity: 1,
          radius: 7,
          fill: true,
          zIndex: 2,
          getFeatureId: function (f) {
            return f.properties.UUID
          }
        }
      }
    }

    return L.vectorGrid.vectorpoi(providerUrl, options)
  }, [providerUrl, Styles])

  // vectorGrid.on('click', function (e) {
  //   console.log(this)
  //   console.log('clicked', e)
  // })

  // vectorGrid.on('mouseover', function (e) {
  //   console.log('mouseover', e)
  // })

  useEffect(() => {
    map.addLayer(vectorGrid)
    return () => {
      map.removeLayer(vectorGrid)
    }
  }, [map, vectorGrid])

  return null
}