// 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 { sendMsg } from '../api';


// import icon from 'leaflet/dist/images/marker-icon.png';
class OpenSeaMap extends Component {
 
  componentDidMount() {
    // setInterval(() => this.setState({ time: Date.now()}), 1000)
    setInterval(() => this.props.parentCallback(), 3000)
    

}


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

      {/* <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' >
       <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;