import React, { Component, createRef } from 'react';
import { makeStyles } from "@material-ui/core/styles";
import Leaflet from 'leaflet';
import { Map, TileLayer, Marker, Popup, MapControl, withLeaflet } from 'react-leaflet';
import { Apps, CloudDownload } from "@material-ui/icons";
import ExampleIcon from "@material-ui/icons/AddToQueue";
import 'leaflet/dist/leaflet.css';

export default class EventMap extends React.Component {
    state = {
      center: {
        lat: 31.698956,
        lng: 76.732407,
      },
      marker: {
        lat: 31.698956,
        lng: 76.732407,
      },
      zoom: 13,
      draggable: true,
    };

    constructor(props) {
      super(props);
      this.map_bounds = {
        dsf: 123
      };
      this.componentDidMount = this.componentDidMount.bind(this);
    };


    componentDidMount(){
      let mapInst =  this.refs.map.leafletElement;
      console.log()
      mapInst.on('moveend', function () {
        console.log(mapInst.getBounds())
      });

      mapInst.on('dragend', function () {
        console.log(this.props)
      });
    }

    updateParent = (newBounds) => {
      this.props.parentCallback({'bounds': newBounds});
    }


    refmarker = createRef(this.state.marker);

    render() {
      const position = [this.state.center.lat, this.state.center.lng];

      return (
        <div>
          <Map ref='map' center={position} zoom={this.state.zoom} style={{height:"500px", width:"500px"}}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
           {this.props.tournament_data.map(mark =>
              <Marker
                ref={this.refmarker}
                draggable={false}
                position={mark.coord}
              >
              <Popup minWidth={90}>
              <span>
                {mark.id}
              </span>
              </Popup>
              </Marker>
           )}
          </Map>
        </div>
      );
    }
  }