// import { useMapEvents } from 'react-leaflet/hooks'
import React, { Component } from "react";
import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents } from 'react-leaflet'
import { friend,Hostile, iconShip,createIcon } from "./icon";
import "./OpenSeaMap.scss";
import {w3cwebsocket as W3CWebSocket} from "websocket";
import ContainerDimensions  from 'react-container-dimensions';


class OpenSeaMap extends Component {

  state =  {
    EntityOnFocus: undefined,
  } 
  updateDimensions() {
    const height = window.innerWidth >= 992 ? window.innerHeight : 400
    this.setState({ height: height })
  }

  componentWillMount() {
    this.updateDimensions()
  }

  componentDidMount() {
    window.addEventListener("resize", this.updateDimensions.bind(this))


  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions.bind(this))
  }


  handleClick(e)
  {
    // console.log(e.target)
    // this.setState({ currentPos: e.latlng });
    console.log(e.latlng);

    console.log("hello world");
  }


  // MarkerEventHandler = useMemo(
  //   (e) => ({
  //     dragend() {
  //       // const marker = markerRef.current
  //       // if (marker != null) {
  //       //   // setPosition(marker.getLatLng())
  //       // }
  //       console.log(e)
  //     },
  //     click: (e) =>
  //     {
  //       this.props.setEntityOnFocus(e.target.options.data);

  //     }
  //   }),
  //   [],

  //  )

  makeIcon(index, entity)
  {
    var icon;
    icon = createIcon(entity.Type,entity.Side)
    return (
      <Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id}
      draggable={true} 
      
      eventHandlers={{
        click: (e) => {
          // console.log(e.target.options.data);  // will print 'FooBar' in console
          var Ent = {
            Name :  e.target.options.data,
            NewPos : undefined

          }
          this.setState((state) =>({
            EntityOnFocus: e.target.options.data
          }))
          this.props.setEntityOnFocus(Ent);

          // this.props.setEntityOnFocus(e.target.options.data);
        },
        dragend: (e) =>
        { 
          var Ent = {
            Name :  e.target.options.data,
            NewPos : [e.target._latlng.lat,e.target._latlng.lng]

          }
          this.setState((state) =>({
            EntityOnFocus: e.target.options.data
          }))
          this.props.setEntityOnFocus(Ent);

          // console.log(e.target);

          // console.log(e.target._latlng);

        }
      }} 
      // eventHandlers={this.MarkerEventHandler}
       >

      {/* <Popup>
      Omu-Aran the Head Post of Igbomina land, 
      is a town in the Nigerian state of Kwara. 
      It originated from Ife and currently the local
      government headquarters of Irepodun local government.
    </Popup> */}
      <Tooltip direction='bottom' offset={[0,13]} opacity={1} permanent>
                       <span>{entity.Name}</span>
                </Tooltip>
    </Marker>
    );
  }

  setPos(props)
  {
    console.log(props);

    this.props.setFocusPosition([1,2])
  }
  
  render() {
const  LocationFinderDummy = (props) => {
       const map = useMapEvents({
           click(e) {

            props.props.setFocusPosition(e.latlng)
            // console.log(e.latlng);
           },
       });
       return null;
   };
    // const positions = this.props.Positions.map((pos, index) => (
    //   <Marker name={"test"} key={index} position={pos.position} icon= {ship} />
    // ));

    return (
      <div className='map' style={{ height: this.state.height }} >
       <MapContainer MapContainer center={[54, 11]} zoom={6} scrollWheelZoom={true}>
       <LocationFinderDummy props ={this.props} />

        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        <TileLayer
          url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />    
          {/* {positions} */}
          {this.props.Entities.map((pos, index) => (
            this.makeIcon(index,pos)
        ))}
      </MapContainer>
       </div>
    );
  }
}





export default OpenSeaMap;