
// import { useMapEvents } from 'react-leaflet/hooks'
import React, { Component } from "react";
import { MapContainer, TileLayer,Marker, Popup } from 'react-leaflet'
import { friend,Hostile, iconShip } from "./icon";
import "./OpenSeaMap.scss"


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

  makeIcon(index, entity)
  {
    var icon;
    switch (entity.Type)
    {
      case "Friend":
        icon = friend;
      break;
      case "Hostile":
        icon = Hostile;
      break;
      default:
        
      break;
    }
    return (
      <Marker name={"test"} key={index} icon={icon} position={entity.position} >
      <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='container' >
       <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.Positions.map((pos, index) => (
            this.makeIcon(index,pos)
          // <Marker name={"test"} key={index} icon={friend} position={pos.position} >
          //     <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>
        ))}
      </MapContainer>
      </div>
    );
  }
}





export default OpenSeaMap;
