import React, {useEffect, useRef, useState} from "react";
import styled from "styled-components";

const Root = styled.div`
  width: 100vw;
  height: 100vh;
`;

let isMapScriptAppended = false;
export const Map = (props: { statsByLocation: any }) => {

  const mapDiv = useRef((null as unknown) as any);
    const map = useRef(null as unknown as any);
    const [isMapReady, setMapReady] = useState(false);

  useEffect(() => {
      const initializeMap
      const append = async () => {
            if(!isMapScriptAppended){
                const mapScript = document.createElement("script");
                mapScript.src =
                    "https://maps.googleapis.com/maps/api/js?key=AIzaSyAM5AQOAn6Yt5PrbqvhNHURd-Uvd61edhw&libraries=visualization";
                document.head.appendChild(mapScript);
                isMapScriptAppended = true;
                mapScript.addEventListener("load",
            }
      };
      append();


    mapScript.addEventListener("load", async e => {
      const data = [
        {
          address: "China",
          weight: 30
        },

        { address: "Thailand", weight: 14 },
        { address: "Hong Kong", weight: 8 },
        { address: "Taiwan", weight: 8 },
        { address: "Japan", weight: 7 },
        { address: "Macau", weight: 7 }
      ];

      const heatMapData = data.map((v, i) => ({
        ...v,
        location: new google.maps.LatLng(
          jsons[i].results[0].geometry.location.lat,
          jsons[i].results[0].geometry.location.lng
        )
      }));

      const asd = [
        {
          location: new google.maps.LatLng(37.782, -122.447),
          weight: 0.5
        }
      ];

      const wuhan = new google.maps.LatLng(30.5928, 114.3055);

      map.current = new google.maps.Map(mapDiv.current, {
        center: wuhan,
        zoom: 5,
        mapTypeId: "roadmap",
        disableDefaultUI: true,
        styles: [
          { elementType: "all", stylers: [{ color: "#330605" }] },
          {
            featureType: "water",
            elementType: "geometry",
            stylers: [{ color: "#0d0d0d" }]
          },
          {
            featureType: "administrative.country",
            elementType: "geometry.stroke",
            stylers: [{ color: "#ff9995" }]
          },
          {
            featureType: "administrative.country",
            elementType: "labels.text.fill",
            stylers: [{ color: "#910f0c" }]
          }
        ]
      });

      map.current.data.add({
        geometry: {
          lat: 30.5928,
          lng: 114.3055
        },
        id: "sample",
        properties: {
          magnitude: 20
        }
      });

      map.current.data.setStyle(feature => {
        console.log("a");
        return {
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 50,
            fillColor: "#f00",
            strokeWeight: 0
          }
        };
      });

      gMap.data.setStyle({
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 50,
          fillColor: "#f00",
          strokeWeight: 0
        }
      });

      const heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatMapData,
        map: gMap,

        radius: 60
      });
    });

  }, []);

  return <Root ref={mapDiv}></Root>;
};