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

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

const getGroupUrlStringByGroup = group => {
  if (group === "renting") {
    // 사용중
    return "_inuse";
  } else if (group === "ready") {
    // 대기중
    return "";
  } else if (group === "target") {
    // 수거대상
    return "_pickup";
  } else if (group === "collect") {
    // 수거
    return "_deactive";
  }
};

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: 11,
      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.lat,
          lng: item.coordinates.lon
        })
      });

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

      marker.item = item;

      this.renderMarker(marker);

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

      window.google.maps.event.addListener(marker, "mouseover", () => {
        this.highlightMarker(marker);
      });

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

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

  renderMarker(marker) {
    const { group, battery } = marker.item;

    const groupString = getGroupUrlStringByGroup(group);
    const batteryString = getBatteryUrlStringByBattery(battery);

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


  highlightMarker(marker) {
    const { group, battery } = marker.item;

    const groupString = getGroupUrlStringByGroup(group);
    const batteryString = getBatteryUrlStringByBattery(battery);

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

  render() {
    this.drawMarkers();

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

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