/* eslint-disable implicit-arrow-linebreak */
/* eslint-disable no-unused-vars */
import React, { useEffect, useMemo, useRef, useState } from 'react'

import L from 'leaflet'
import './L.VectorGrid.VectorPoi'

import { createTileLayerComponent, createElementObject, updateGridLayer } from '@react-leaflet/core'
// function patchVectorGridLayer(obj) {
//   // Fix error for point data.
//   // eg. mouseover does not work without this.
//   obj._createLayer_orig = obj._createLayer
//   obj._createLayer = function (feat, pxPerExtent, layerStyle) {
//     let layer = this._createLayer_orig(feat, pxPerExtent, layerStyle)
//     if (feat.type === 1) {
//       layer.getLatLng = null
//     }
//     return layer
//   }
//   // do this for chaining
//   return obj
// }
const VectorPoi = createTileLayerComponent(
  function createBetterWMSLayer({ url, options }, context) {
    const layer = new L.vectorGrid.vectorpoi(url, options, context)
    layer.on('click', (e) => {
      const { properties } = e.layer
      console.log(properties)
    })

    return createElementObject(layer, context)
  },
  (layer, props, prevProps) => {
    updateGridLayer(layer, props, prevProps)

    if (props.params !== null && props.params !== prevProps.params) {
      layer.setParams(props.params)
    }
  }
)
// VectorPoi.on('click', (e) => {
//   console.log(e)
// })

export default VectorPoi