import {
  AttributionControl,
  CircleMarker,
  LayerGroup,
  LayersControl,
  MapContainer,
  Marker,
  Polygon,
  Polyline,
  Popup,
  Rectangle,
  TileLayer,
  VideoOverlay,
  useMap,
  useMapEvent,
  useMapEvents
} from 'react-leaflet'
// import 'leaflet/dist/leaflet.css'

import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react'
// import 'leaflet/dist/leaflet.css'
// import '../../../../node_modules/leaflet/dist/leaflet.css'

import { StyledMapContainer } from './MapBox.theme'
import GeoJSON from 'geojson'
import L from 'leaflet'

// function LocationMarker() {
//   const [position, setPosition] = useState(null)
//   const map = useMapEvents({
//     click() {
//       map.locate()
//     },
//     locationfound(e) {
//       if (e?.latlng) {
//         setPosition(e.latlng)
//         map.flyTo(e.latlng, map.getZoom())
//       }
//     }
//   })

//   return position === null ? null : (
//     <Marker position={position}>
//       <Popup>You are here</Popup>
//     </Marker>
//   )
// }

const MapBox = () => {
  // const setColor = ({ }) => {
  //   return { weight: 1 }
  // }
  // const setIcon = ({ properties }, latlng) => {
  //   return L.marker(latlng, { icon: customMarkerIcon(properties.Name) })
  // }

  const center = [51.505, -0.09]

  const multiPolygonGroup = [
    [
      [51.51, -0.12],
      [51.51, -0.13],
      [51.53, -0.13]
    ],
    [
      [51.51, -0.05],
      [51.51, -0.07],
      [51.53, -0.07]
    ]
  ]

  const polyline = [
    [51.505, -0.09],
    [51.51, -0.1],
    [51.51, -0.12]
  ]

  const multiPolyline = [
    [
      [51.5, -0.1],
      [51.5, -0.12],
      [51.52, -0.12]
    ],
    [
      [51.5, -0.05],
      [51.5, -0.06],
      [51.52, -0.06]
    ]
  ]

  const polygon = [
    [51.515, -0.09],
    [51.52, -0.1],
    [51.52, -0.12]
  ]

  const multiPolygon = [
    [
      [51.51, -0.12],
      [51.51, -0.13],
      [51.53, -0.13],
      [51.55, -0.2]
    ],
    [
      [51.51, -0.05],
      [51.51, -0.07],
      [51.53, -0.07]
    ]
  ]
  const fillBlueOptions = { fillColor: 'blue' }
  const blackOptions = { color: 'black' }
  const limeOptions = { color: 'lime' }
  const purpleOptions = { color: 'purple' }
  const redOptions = { color: 'red' }

  const POSITION_CLASSES = {
    bottomleft: 'leaflet-bottom leaflet-left',
    bottomright: 'leaflet-bottom leaflet-right',
    topleft: 'leaflet-top leaflet-left',
    topright: 'leaflet-top leaflet-right'
  }
  const BOUNDS_STYLE = { weight: 1 }

  function MinimapBounds({ parentMap, zoom }) {
    const minimap = useMap()

    // Clicking a point on the minimap sets the parent's map center
    const onClick = useCallback(
      event => {
        parentMap.setView(event.latlng, parentMap.getZoom())
      },
      [parentMap]
    )
    useMapEvent('click', onClick)

    // Keep track of bounds in state to trigger renders
    const [bounds, setBounds] = useState(parentMap.getBounds())
    const onChange = useCallback(() => {
      setBounds(parentMap.getBounds())
      // Update the minimap's view to match the parent map's center and zoom
      minimap.setView(parentMap.getCenter(), zoom)
    }, [minimap, parentMap, zoom])

    // Listen to events on the parent map
    const handlers = useMemo(() => ({ move: onChange, zoom: onChange }), [])
    useEventHandlers({ instance: parentMap }, handlers)

    return <Rectangle bounds={bounds} pathOptions={BOUNDS_STYLE} />
  }

  function MinimapControl({ position, zoom }) {
    const parentMap = useMap()
    const mapZoom = zoom || 0

    // Memoize the minimap so it's not affected by position changes
    const minimap = useMemo(
      () => (
        <MapContainer
          style={{ height: 80, width: 80 }}
          center={parentMap.getCenter()}
          zoom={mapZoom}
          dragging={false}
          doubleClickZoom={false}
          scrollWheelZoom={false}
          attributionControl={false}
          zoomControl={false}
        >
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
          <MinimapBounds parentMap={parentMap} zoom={mapZoom} />
        </MapContainer>
      ),
      []
    )

    const positionClass =
      (position && POSITION_CLASSES[position]) || POSITION_CLASSES.topright
    return (
      <div className={positionClass}>
        <div className="leaflet-control leaflet-bar">{minimap}</div>
      </div>
    )
  }

  const videoOverlayBounds = L.latLngBounds([
    [51.51, -0.12],
    [51.52, -0.11] // Define the bounds for the video overlay
  ])

  return (
    <StyledMapContainer>
      {/* <MapContainer
        center={[51.505, -0.09]}
        zoom={10}
        style={{ height: '500px', width: '100%' }}
        scrollWheelZoom={true}
      >
        <LayersControl position="bottomright">
          <LayersControl.Overlay checked name="Light Map">
            <TileLayer
              url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
              attribution="Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL."
            />
          </LayersControl.Overlay>
          <LayersControl.Overlay name="Satellite Map">
            <TileLayer
              url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
              attribution="&copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
            />
          </LayersControl.Overlay>
          <LayersControl.Overlay name="Dark Map">
            <TileLayer
              url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
              attribution="Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL."
            />
          </LayersControl.Overlay>
        </LayersControl>

        <CircleMarker center={[51.51, -0.12]} radius={20}>
          <Popup>Popup in CircleMarker</Popup>
        </CircleMarker>


        <MinimapControl position="topright" zoom={2} />

        <LayerGroup>
          {multiPolygon.map(item => (
            <Polygon pathOptions={purpleOptions} positions={item} />
          ))}
        </LayerGroup>
        <VideoOverlay
          bounds={videoOverlayBounds}
          url="https://www.youtube.com/watch?v=CXa0f4-dWi4"
          zIndex={1000}
        />
      </MapContainer> */}
    </StyledMapContainer>
  )
}

export default MapBox
// function useEventHandlers({ instance }, handlers) {
//   useEffect(() => {
//     const { move, zoom } = handlers

//     if (instance) {
//       instance.on('move', move)
//       instance.on('zoom', zoom)
//     }

//     return () => {
//       if (instance) {
//         instance.off('move', move)
//         instance.off('zoom', zoom)
//       }
//     }
//   }, [instance, handlers])
// }