
// import { useMapEvents } from 'react-leaflet/hooks'
import React, { Component } from "react";
import { MapContainer, TileLayer,Marker, Popup } 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';
const client = new W3CWebSocket("ws://localhost:8008/");

// import icon from 'leaflet/dist/images/marker-icon.png';
class OpenSeaMap extends Component {

  
  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)
    console.log("hello world");
  }

  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}
      
      eventHandlers={{
        click: (e) => {
          console.log(e.target.options.data);  // will print 'FooBar' in console
          this.props.setEntityOnFocus(e.target.options.data);
        },
      }}  >

      {/* <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> */}
    </Marker>

    );
  }

  render() {
    // 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={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
        <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;
