import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Row, Col } from "reactstrap";

import "./styles.css";
export default class App extends Component {
  constructor(props) {
    super(props);
    // console.log("Comments lead_id" + this.props.id);
    this.state = {
      agentList: [
        {
          status: "green",
          name: "X",
          lat: "28.5718026",
          long: "77.0275846"
        },
        {
          status: "grey",
          name: "Y",
          lat: "28.5700000",
          long: "77.0275846"
        }
      ]
    };

    this.initMap = this.initMap.bind(this);
    this.navAgent = this.navAgent.bind(this);
  }

  componentDidMount() {
    this.initMap();
  }

  initMap() {
    var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 10,
      center: new google.maps.LatLng(28.6139, 77.209),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    for (var i = 0; i < this.state.agentList.length; i++) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(
          this.state.agentList[i].lat,
          this.state.agentList[i].long
        ),
        map: map,
        zoom: 9
      });
    }
  }

  navAgent(idx, e) {
    e.preventDefault();

    // console.log(this.state.agentList[id].lat);
    var latLng = new google.maps.LatLng(
      this.state.agentList[id].lat,
      this.state.agentList[id].long
    );

    map.panTo(latLng);
  }

  render() {
    return (
      <div>
        <Col xs="9" sm="9" md="9" lg="9">
          <div
            id="map"
            style={{
              width: "100%",
              height: "500px",
              backgroundColor: "gray",
              borderRadius: "5%"
            }}
          />
        </Col>
        <Col xs="3" sm="3" md="3" lg="3">
          <span
            style={{
              margin: "2px",
              fontSize: "12px",
              textAlign: "center",
              marginLeft: "1em"
            }}
          >
            {this.state.agentList.map(function(d, idx) {
              {
              }
              return (
                <div>
                  <button
                    onClick={e => {
                      this.navAgent(idx, e);
                    }}
                  >
                    {d.name}
                  </button>
                </div>
              );
            }, this)}
          </span>
        </Col>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);