import React from 'react'
import L from 'leaflet'
import { ReactDOMServer, renderToStaticMarkup } from 'react-dom/server'
import ComponentPopUpNpwp from './ComponentPopUpNpwp'
import jquery from 'jquery'
import { Label } from 'reactstrap'
import { Divider } from 'primereact/divider'

let latitude
let longitude

function success(position) {
  latitude = position.coords.latitude
  longitude = position.coords.longitude
}

function error() {
  console.log('Unable to retrieve your location')
}

function getLocation() {
  navigator.geolocation.getCurrentPosition(success, error)
}

const onClickDirection = (koordinatAwal, KoordinatAkhir) => {
  const lat1 = koordinatAwal.lat
  const lng1 = koordinatAwal.lng
  const lat2 = KoordinatAkhir.lat
  const lng2 = KoordinatAkhir.lng

  const targetLink = `https://www.google.com/maps/dir/${lat1 ? `${lat1},${lng1}` : ''}/'${lat2},${lng2}'/`
  window.open(targetLink, '_blank')
}

L.TileLayer.MatoaNpwp = L.TileLayer.WMS.extend({
  onAdd(map) {
    // Triggered when the layer is added to a map.
    //   Register a click listener, then do all the upstream WMS things
    L.TileLayer.WMS.prototype.onAdd.call(this, map)
    map.on('click', this.getFeatureInfo, this)
    getLocation()
    // map.on('move', () => console.log(this))
    // console.log(this)
  },
  onRemove(map) {
    // Triggered when the layer is removed from a map.
    //   Unregister a click listener, then do all the upstream WMS things
    L.TileLayer.WMS.prototype.onRemove.call(this, map)
    map.off('click', this.getFeatureInfo, this)
  },
  async getFeatureInfo(evt) {
    // Make an AJAX request to the server and hope for the best
    const url = this.getFeatureInfoUrl(evt.latlng),
      showResults = L.Util.bind(this.showGetFeatureInfo, this)

    await fetch(url)
      .then((response) => response.json())
      .then((data) => {
        // console.log(data)
        const err = typeof data === 'object' ? null : data
        const numberReturned = data?.numberReturned

        if (numberReturned === 1) {
          // showResults(err, evt.latlng, JSON.stringify(data))
          showResults(err, evt.latlng, data.features[0].properties)
          // const id_md = data.features[0].properties.i
        }
        if (numberReturned > 1) {
          showList(err, evt.latlng, data)
        }
      })
      .catch((err) => {
        // showResults(JSON.stringify(err))
      })
  },

  getFeatureInfoUrl(latlng) {
    // return
    // const map = useMap()
    // Construct a GetFeatureInfo request URL given a point
    const point = this._map.latLngToContainerPoint(latlng)
    const size = this._map.getSize()

    // https://docs.geoserver.org/latest/en/user/services/wms/reference.html#wms-getfeatureinfo
    const params = {
      request: 'GetFeatureInfo',
      service: 'WMS',
      crs: 'EPSG:4326',
      styles: this.wmsParams.styles,
      transparent: this.wmsParams.transparent,
      version: this.wmsParams.version,
      format: this.wmsParams.format,
      bbox: this._map.getBounds().toBBoxString(),
      height: size.y,
      // height: this.wmsParams.height,
      width: size.x,
      // width: this.wmsParams.width,
      layers: this.wmsParams.layers,
      viewparams: this.wmsParams.viewparams,
      cql_filter: this.wmsParams.cql_filter,
      query_layers: this.wmsParams.layers,
      info_format: 'application/json',
      feature_count: 1
    }

    params[params.version === '1.3.0' ? 'i' : 'x'] = Math.round(point.x)
    params[params.version === '1.3.0' ? 'j' : 'y'] = Math.round(point.y)
    return this._url + L.Util.getParamString(params, this._url, true)
  },

  async showGetFeatureInfo(err, latlng, content) {
    if (err) {
      console.log(err)
    }
    let data = null
    await jquery.ajax({
      url: '/engineN/kewilayahan/peta/matoalokasi',
      type: 'post',
      dataType: 'json',
      data: { uuid: content.UUID },
      success: (response) => {
        data = response
        // console.log(response)
      }
    })
    const popup = L.popup({ maxWidth: 800, minWidth: 200, namaLayer: this.wmsParams.layers })
      .setLatLng(latlng)
      .setContent(ComponentPopUpNpwp({ ...content, ...data }))
      .openOn(this._map)
    // popup.on('popupclose', (e) => {
    // store.dispatch(setIsOpenPopUp(false))
    // console.log(e)
    // })

    const popupTampil = popup._contentNode
    const arah = popupTampil.querySelectorAll('.arah')
    const poiName = popupTampil.querySelectorAll('.poi-name')
    const tutupBox = popupTampil.querySelector('.tutup-box')

    // const alamat = popupTampil.querySelector('#popup-alamat')
    // const nm_kpp_zona = popupTampil.querySelector('#popup-nm_kpp_zona')
    // const nama_ar_zona = popupTampil.querySelector('#popup-nama_ar_zona')

    // const Alamat = () => {
    //   return (
    //     <>
    //       <Divider type="solid" />
    //       <Label>{data.alamat}</Label>
    //       <Label>{data.nm_kpp_zona}</Label>
    //       <Label>{data.nama_ar_zona}</Label>
    //       <Divider />
    //     </>
    //   )
    // }
    // alamat.innerHTML = renderToStaticMarkup(<Alamat />)

    tutupBox.addEventListener('click', () => {
      popup.close()
    })

    arah[0].addEventListener('click', () => {
      onClickDirection({ lat: latitude ?? '', lng: longitude ?? '' }, { lat: content.GEO_LOK_LAT, lng: content.GEO_LOK_LING })
    })

    poiName[0].addEventListener('click', () => {
      // onClickPoiName(id_md)
    })
  }
})

L.tileLayer.matoaNpwp = function (url, options) {
  return new L.TileLayer.MatoaNpwp(url, options)
}