import React, {useEffect} from "react";
import Dimensions from "react-dimensions";
import res from './res';

let map;
let markers = [];
let infoWindow;

const getBatteryUrlStringByBattery = battery => {
  if (battery >= 0 && battery < 25) {
    return "0-25";
  } else if (battery >= 25 && battery < 50) {
    return "25-50";
  } else if (battery >= 50 && battery < 75) {
    return "50-75";
  }
  return "75-100";
};

class GoogleMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      kickboards: []
    };
  }

  componentDidMount() {
    // fetch('http://1.201.143.67:5901/kickboard/all')
    //   .then(r => r.json())
    //   .then(d => {
    //     if(!d.success || !d.data.length) return;
    //
    //     // console.log(d.data)
    //     this.setState({
    //       kickboards: d.data
    //     })
    //   })
    //   .then(d => {
    //     const { google } = window;
    //
    //     infoWindow = new window.google.maps.InfoWindow({});
    //
    //     map = new google.maps.Map(document.getElementById("map"), {
    //       zoom: 11,
    //       center: {lat: -34.397, lng: 150.644},
    //       disableDefaultUI: true,
    //       zoomControl: true
    //     });
    //
    //     google.maps.event.addListenerOnce(map, "idle", () => {
    //       this.getCurrentLocation();
    //     });
    //   })
    //   .catch(err => console.log(err));

    const response = JSON.parse(res);
    this.setState({
      kickboards: response.data
    });

    const { google } = window;
    infoWindow = new window.google.maps.InfoWindow({});

    map = new google.maps.Map(document.getElementById("map"), {
      zoom: 8,
      center: {lat: -34.397, lng: 150.644},
      disableDefaultUI: true,
      zoomControl: true
    });

    google.maps.event.addListenerOnce(map, "idle", () => {
      this.getCurrentLocation();
    });
  }

  getCurrentLocation() {
    if (navigator.geolocation) {
      map.setCenter(
        new window.google.maps.LatLng({
          lat: 37.2441088,
          lng: 127.05054720000001
        })
      );
    } else {
      map.setCenter(
        new window.google.maps.LatLng({
          lat: 37.2441088,
          lng: 127.05054720000001
        })
      );
    }
  }

  drawMarkers() {
    if (map === null) return;
    // const selectedMarker = new window.google.maps.Marker({});

    markers = this.state.kickboards.map(item => {

      const marker = new window.google.maps.Marker({
        position: new window.google.maps.LatLng({
          lat: item.coordinates.y,
          lng: item.coordinates.x
        })
      });

      const markerContent = `
        <div>
          <div style="color:black"> 시리얼번호: ${item.serial_number} </div>
        </div>
      `;

      marker.item = item;

      this.renderMarker(marker);

      window.google.maps.event.addListener(marker, "click", () => {
        infoWindow.close();
        infoWindow.setContent(markerContent);
        infoWindow.open(map, marker);
        this.props.setKbId(item.serial_number);
      });

      window.google.maps.event.addListener(marker, "mouseover", () => {
        infoWindow.close();
        infoWindow.setContent(markerContent);
        infoWindow.open(map, marker);
        this.highlightMarker(marker);
      });

      window.google.maps.event.addListener(marker, "mouseout", () => {
        infoWindow.close();
        this.renderMarker(marker);
      });

      marker.setMap(map);
      return marker;
    });
  }

  renderMarker(marker) {
    const { battery } = marker.item;
    const batteryString = getBatteryUrlStringByBattery(battery);

    const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}.png`);
    marker.setIcon(iconUrl);
  }

  highlightMarker(marker) {
    const { battery } = marker.item;
    const batteryString = getBatteryUrlStringByBattery(battery);

    const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}_selected.png`);
    marker.setIcon(iconUrl);
  }

  moveToMarker(kbId) {
    if (map == null || markers.length === 0) {
      return;
    }

    const searchedMarker = markers.find(
      marker => marker.item.serial_number === kbId
    );

    if(!searchedMarker) return;
    const markerContent = `
      <div>
        <div style="color:black"> 시리얼번호: ${kbId} </div>
      </div>
    `;

    infoWindow.close();
    infoWindow.setContent(markerContent);
    infoWindow.open(map, searchedMarker);

    map.setCenter(
      new window.google.maps.LatLng({
        lat: searchedMarker.item.coordinates.y,
        lng: searchedMarker.item.coordinates.x
      })
    );
    map.setZoom(14);
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    this.moveToMarker(this.props.kbId);
  }

  render() {
    this.drawMarkers();

    return (
      <div id="map" style={{height:this.props.containerWidth}}>
      </div>
    )
  }
};

export default Dimensions()(GoogleMap) // Enhanced component