text: import utils from "./utils";
  /*-----------------------------------------------
  |   Gooogle Map
  -----------------------------------------------*/
  
  function initMap() {
    const themeController = document.body;
    const $googlemaps = document.querySelectorAll(".googlemap");
  
    if ($googlemaps.length && window.google) {
      // Visit https://snazzymaps.com/ for more themes
      const mapStyles = {
        Default: [
          {
            featureType: "water",
            elementType: "geometry",
            stylers: [{ color: "#e9e9e9" }, { lightness: 17 }],
          },
          {
            featureType: "landscape",
            elementType: "geometry",
            stylers: [{ color: "#f5f5f5" }, { lightness: 20 }],
          },
          {
            featureType: "road.highway",
            elementType: "geometry.fill",
            stylers: [{ color: "#ffffff" }, { lightness: 17 }],
          },
          {
            featureType: "road.highway",
            elementType: "geometry.stroke",
            stylers: [{ color: "#ffffff" }, { lightness: 29 }, { weight: 0.2 }],
          },
          {
            featureType: "road.arterial",
            elementType: "geometry",
            stylers: [{ color: "#ffffff" }, { lightness: 18 }],
          },
          {
            featureType: "road.local",
            elementType: "geometry",
            stylers: [{ color: "#ffffff" }, { lightness: 16 }],
          },
          {
            featureType: "poi",
            elementType: "geometry",
            stylers: [{ color: "#f5f5f5" }, { lightness: 21 }],
          },
          {
            featureType: "poi.park",
            elementType: "geometry",
            stylers: [{ color: "#dedede" }, { lightness: 21 }],
          },
          {
            elementType: "labels.text.stroke",
            stylers: [
              { visibility: "on" },
              { color: "#ffffff" },
              { lightness: 16 },
            ],
          },
          {
            elementType: "labels.text.fill",
            stylers: [
              { saturation: 36 },
              { color: "#333333" },
              { lightness: 40 },
            ],
          },
          { elementType: "labels.icon", stylers: [{ visibility: "off" }] },
          {
            featureType: "transit",
            elementType: "geometry",
            stylers: [{ color: "#f2f2f2" }, { lightness: 19 }],
          },
          {
            featureType: "administrative",
            elementType: "geometry.fill",
            stylers: [{ color: "#fefefe" }, { lightness: 20 }],
          },
          {
            featureType: "administrative",
            elementType: "geometry.stroke",
            stylers: [{ color: "#fefefe" }, { lightness: 17 }, { weight: 1.2 }],
          },
        ],
        Gray: [
          {
            featureType: "all",
            elementType: "labels.text.fill",
            stylers: [
              { saturation: 36 },
              { color: "#000000" },
              { lightness: 40 },
            ],
          },
          {
            featureType: "all",
            elementType: "labels.text.stroke",
            stylers: [
              { visibility: "on" },
              { color: "#000000" },
              { lightness: 16 },
            ],
          },
          {
            featureType: "all",
            elementType: "labels.icon",
            stylers: [{ visibility: "off" }],
          },
          {
            featureType: "administrative",
            elementType: "geometry.fill",
            stylers: [{ color: "#000000" }, { lightness: 20 }],
          },
          {
            featureType: "administrative",
            elementType: "geometry.stroke",
            stylers: [{ color: "#000000" }, { lightness: 17 }, { weight: 1.2 }],
          },
          {
            featureType: "landscape",
            elementType: "geometry",
            stylers: [{ color: "#000000" }, { lightness: 20 }],
          },
          {
            featureType: "poi",
            elementType: "geometry",
            stylers: [{ color: "#000000" }, { lightness: 21 }],
          },
          {
            featureType: "road.highway",
            elementType: "geometry.fill",
            stylers: [{ color: "#000000" }, { lightness: 17 }],
          },
          {
            featureType: "road.highway",
            elementType: "geometry.stroke",
            stylers: [{ color: "#000000" }, { lightness: 29 }, { weight: 0.2 }],
          },
          {
            featureType: "road.arterial",
            elementType: "geometry",
            stylers: [{ color: "#000000" }, { lightness: 18 }],
          },
          {
            featureType: "road.local",
            elementType: "geometry",
            stylers: [{ color: "#000000" }, { lightness: 16 }],
          },
          {
            featureType: "transit",
            elementType: "geometry",
            stylers: [{ color: "#000000" }, { lightness: 19 }],
          },
          {
            featureType: "water",
            elementType: "geometry",
            stylers: [{ color: "#000000" }, { lightness: 17 }],
          },
        ],
        Midnight: [
          {
            featureType: "all",
            elementType: "labels.text.fill",
            stylers: [{ color: "#ffffff" }],
          },
          {
            featureType: "all",
            elementType: "labels.text.stroke",
            stylers: [{ color: "#000000" }, { lightness: 13 }],
          },
          {
            featureType: "administrative",
            elementType: "geometry.fill",
            stylers: [{ color: "#000000" }],
          },
          {
            featureType: "administrative",
            elementType: "geometry.stroke",
            stylers: [{ color: "#144b53" }, { lightness: 14 }, { weight: 1.4 }],
          },
          {
            featureType: "landscape",
            elementType: "all",
            stylers: [{ color: "#08304b" }],
          },
          {
            featureType: "poi",
            elementType: "geometry",
            stylers: [{ color: "#0c4152" }, { lightness: 5 }],
          },
          {
            featureType: "road.highway",
            elementType: "geometry.fill",
            stylers: [{ color: "#000000" }],
          },
          {
            featureType: "road.highway",
            elementType: "geometry.stroke",
            stylers: [{ color: "#0b434f" }, { lightness: 25 }],
          },
          {
            featureType: "road.arterial",
            elementType: "geometry.fill",
            stylers: [{ color: "#000000" }],
          },
          {
            featureType: "road.arterial",
            elementType: "geometry.stroke",
            stylers: [{ color: "#0b3d51" }, { lightness: 16 }],
          },
          {
            featureType: "road.local",
            elementType: "geometry",
            stylers: [{ color: "#000000" }],
          },
          {
            featureType: "transit",
            elementType: "all",
            stylers: [{ color: "#146474" }],
          },
          {
            featureType: "water",
            elementType: "all",
            stylers: [{ color: "#021019" }],
          },
        ],
        Hopper: [
          {
            featureType: "water",
            elementType: "geometry",
            stylers: [
              { hue: "#165c64" },
              { saturation: 34 },
              { lightness: -69 },
              { visibility: "on" },
            ],
          },
          {
            featureType: "landscape",
            elementType: "geometry",
            stylers: [
              { hue: "#b7caaa" },
              { saturation: -14 },
              { lightness: -18 },
              { visibility: "on" },
            ],
          },
          {
            featureType: "landscape.man_made",
            elementType: "all",
            stylers: [
              { hue: "#cbdac1" },
              { saturation: -6 },
              { lightness: -9 },
              { visibility: "on" },
            ],
          },
          {
            featureType: "road",
            elementType: "geometry",
            stylers: [
              { hue: "#8d9b83" },
              { saturation: -89 },
              { lightness: -12 },
              { visibility: "on" },
            ],
          },
          {
            featureType: "road.highway",
            elementType: "geometry",
            stylers: [
              { hue: "#d4dad0" },
              { saturation: -88 },
              { lightness: 54 },
              { visibility: "simplified" },
            ],
          },
          {
            featureType: "road.arterial",
            elementType: "geometry",
            stylers: [
              { hue: "#bdc5b6" },
              { saturation: -89 },
              { lightness: -3 },
              { visibility: "simplified" },
            ],
          },
          {
            featureType: "road.local",
            elementType: "geometry",
            stylers: [
              { hue: "#bdc5b6" },
              { saturation: -89 },
              { lightness: -26 },
              { visibility: "on" },
            ],
          },
          {
            featureType: "poi",
            elementType: "geometry",
            stylers: [
              { hue: "#c17118" },
              { saturation: 61 },
              { lightness: -45 },
              { visibility: "on" },
            ],
          },
          {
            featureType: "poi.park",
            elementType: "all",
            stylers: [
              { hue: "#8ba975" },
              { saturation: -46 },
              { lightness: -28 },
              { visibility: "on" },
            ],
          },
          {
            featureType: "transit",
            elementType: "geometry",
            stylers: [
              { hue: "#a43218" },
              { saturation: 74 },
              { lightness: -51 },
              { visibility: "simplified" },
            ],
          },
          {
            featureType: "administrative.province",
            elementType: "all",
            stylers: [
              { hue: "#ffffff" },
              { saturation: 0 },
              { lightness: 100 },
              { visibility: "simplified" },
            ],
          },
          {
            featureType: "administrative.neighborhood",
            elementType: "all",
            stylers: [
              { hue: "#ffffff" },
              { saturation: 0 },
              { lightness: 100 },
              { visibility: "off" },
            ],
          },
          {
            featureType: "administrative.locality",
            elementType: "labels",
            stylers: [
              { hue: "#ffffff" },
              { saturation: 0 },
              { lightness: 100 },
              { visibility: "off" },
            ],
          },
          {
            featureType: "administrative.land_parcel",
            elementType: "all",
            stylers: [
              { hue: "#ffffff" },
              { saturation: 0 },
              { lightness: 100 },
              { visibility: "off" },
            ],
          },
          {
            featureType: "administrative",
            elementType: "all",
            stylers: [
              { hue: "#3a3935" },
              { saturation: 5 },
              { lightness: -57 },
              { visibility: "off" },
            ],
          },
          {
            featureType: "poi.medical",
            elementType: "geometry",
            stylers: [
              { hue: "#cba923" },
              { saturation: 50 },
              { lightness: -46 },
              { visibility: "on" },
            ],
          },
        ],
        Beard: [
          {
            featureType: "poi.business",
            elementType: "labels.text",
            stylers: [{ visibility: "on" }, { color: "#333333" }],
          },
        ],
        AssassianCreed: [
          {
            featureType: "all",
            elementType: "all",
            stylers: [{ visibility: "on" }],
          },
          {
            featureType: "all",
            elementType: "labels",
            stylers: [{ visibility: "off" }, { saturation: "-100" }],
          },
          {
            featureType: "all",
            elementType: "labels.text.fill",
            stylers: [
              { saturation: 36 },
              { color: "#000000" },
              { lightness: 40 },
              { visibility: "off" },
            ],
          },
          {
            featureType: "all",
            elementType: "labels.text.stroke",
            stylers: [
              { visibility: "off" },
              { color: "#000000" },
              { lightness: 16 },
            ],
          },
          {
            featureType: "all",
            elementType: "labels.icon",
            stylers: [{ visibility: "off" }],
          },
          {
            featureType: "administrative",
            elementType: "geometry.fill",
            stylers: [{ color: "#000000" }, { lightness: 20 }],
          },
          {
            featureType: "administrative",
            elementType: "geometry.stroke",
            stylers: [{ color: "#000000" }, { lightness: 17 }, { weight: 1.2 }],
          },
          {
            featureType: "landscape",
            elementType: "geometry",
            stylers: [{ color: "#000000" }, { lightness: 20 }],
          },
          {
            featureType: "landscape",
            elementType: "geometry.fill",
            stylers: [{ color: "#4d6059" }],
          },
          {
            featureType: "landscape",
            elementType: "geometry.stroke",
            stylers: [{ color: "#4d6059" }],
          },
          {
            featureType: "landscape.natural",
            elementType: "geometry.fill",
            stylers: [{ color: "#4d6059" }],
          },
          {
            featureType: "poi",
            elementType: "geometry",
            stylers: [{ lightness: 21 }],
          },
          {
            featureType: "poi",
            elementType: "geometry.fill",
            stylers: [{ color: "#4d6059" }],
          },
          {
            featureType: "poi",
            elementType: "geometry.stroke",
            stylers: [{ color: "#4d6059" }],
          },
          {
            featureType: "road",
            elementType: "geometry",
            stylers: [{ visibility: "on" }, { color: "#7f8d89" }],
          },
          {
            featureType: "road",
            elementType: "geometry.fill",
            stylers: [{ color: "#7f8d89" }],
          },
          {
            featureType: "road.highway",
            elementType: "geometry.fill",
            stylers: [{ color: "#7f8d89" }, { lightness: 17 }],
          },
          {
            featureType: "road.highway",
            elementType: "geometry.stroke",
            stylers: [{ color: "#7f8d89" }, { lightness: 29 }, { weight: 0.2 }],
          },
          {
            featureType: "road.arterial",
            elementType: "geometry",
            stylers: [{ color: "#000000" }, { lightness: 18 }],
          },
          {
            featureType: "road.arterial",
            elementType: "geometry.fill",
            stylers: [{ color: "#7f8d89" }],
          },
          {
            featureType: "road.arterial",
            elementType: "geometry.stroke",
            stylers: [{ color: "#7f8d89" }],
          },
          {
            featureType: "road.local",
            elementType: "geometry",
            stylers: [{ color: "#000000" }, { lightness: 16 }],
          },
          {
            featureType: "road.local",
            elementType: "geometry.fill",
            stylers: [{ color: "#7f8d89" }],
          },
          {
            featureType: "road.local",
            elementType: "geometry.stroke",
            stylers: [{ color: "#7f8d89" }],
          },
          {
            featureType: "transit",
            elementType: "geometry",
            stylers: [{ color: "#000000" }, { lightness: 19 }],
          },
          {
            featureType: "water",
            elementType: "all",
            stylers: [{ color: "#2b3638" }, { visibility: "on" }],
          },
          {
            featureType: "water",
            elementType: "geometry",
            stylers: [{ color: "#2b3638" }, { lightness: 17 }],
          },
          {
            featureType: "water",
            elementType: "geometry.fill",
            stylers: [{ color: "#24282b" }],
          },
          {
            featureType: "water",
            elementType: "geometry.stroke",
            stylers: [{ color: "#24282b" }],
          },
          {
            featureType: "water",
            elementType: "labels",
            stylers: [{ visibility: "off" }],
          },
          {
            featureType: "water",
            elementType: "labels.text",
            stylers: [{ visibility: "off " }],
          },
          {
            featureType: "water",
            elementType: "labels.text.fill",
            stylers: [{ visibility: "off" }],
          },
          {
            featureType: "water",
            elementType: "labels.text.stroke",
            stylers: [{ visibility: "off" }],
          },
          {
            featureType: "water",
            elementType: "labels.icon",
            stylers: [{ visibility: "off" }],
          },
        ],
        SubtleGray: [
          {
            featureType: "administrative",
            elementType: "all",
            stylers: [{ saturation: "-100" }],
          },
          {
            featureType: "administrative.province",
            elementType: "all",
            stylers: [{ visibility: "off" }],
          },
          {
            featureType: "landscape",
            elementType: "all",
            stylers: [
              { saturation: -100 },
              { lightness: 65 },
              { visibility: "on" },
            ],
          },
          {
            featureType: "poi",
            elementType: "all",
            stylers: [
              { saturation: -100 },
              { lightness: "50" },
              { visibility: "simplified" },
            ],
          },
          {
            featureType: "road",
            elementType: "all",
            stylers: [{ saturation: -100 }],
          },
          {
            featureType: "road.highway",
            elementType: "all",
            stylers: [{ visibility: "simplified" }],
          },
          {
            featureType: "road.arterial",
            elementType: "all",
            stylers: [{ lightness: "30" }],
          },
          {
            featureType: "road.local",
            elementType: "all",
            stylers: [{ lightness: "40" }],
          },
          {
            featureType: "transit",
            elementType: "all",
            stylers: [{ saturation: -100 }, { visibility: "simplified" }],
          },
          {
            featureType: "water",
            elementType: "geometry",
            stylers: [
              { hue: "#ffff00" },
              { lightness: -25 },
              { saturation: -97 },
            ],
          },
          {
            featureType: "water",
            elementType: "labels",
            stylers: [{ lightness: -25 }, { saturation: -100 }],
          },
        ],
        Tripitty: [
          {
            featureType: "all",
            elementType: "labels",
            stylers: [{ visibility: "off" }],
          },
          {
            featureType: "administrative",
            elementType: "all",
            stylers: [{ visibility: "off" }],
          },
          {
            featureType: "landscape",
            elementType: "all",
            stylers: [{ color: "#2c5ca5" }],
          },
          {
            featureType: "poi",
            elementType: "all",
            stylers: [{ color: "#2c5ca5" }],
          },
          {
            featureType: "road",
            elementType: "all",
            stylers: [{ visibility: "off" }],
          },
          {
            featureType: "transit",
            elementType: "all",
            stylers: [{ visibility: "off" }],
          },
          {
            featureType: "water",
            elementType: "all",
            stylers: [{ color: "#193a70" }, { visibility: "on" }],
          },
        ],
        Cobalt: [
          {
            "featureType": "all",
            "elementType": "all",
            "stylers": [
              {
                "invert_lightness": true
              },
              {
                "saturation": 10
              },
              {
                "lightness": 30
              },
              {
                "gamma": 0.5
              },
              {
                "hue": "#435158"
              }
            ]
          }
        ]
  
      };
  
      $googlemaps.forEach((itm) => {
        const latLng = utils.getData(itm, "latlng").split(",");
        const markerPopup = itm.innerHTML;
        const icon = utils.getData(itm, "icon")
          ? utils.getData(itm, "icon")
          : "https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png";
        const zoom = utils.getData(itm, "zoom");
        const mapElement = itm;
        const mapStyle = utils.getData(itm, "theme");
  
        if (utils.getData(itm, "theme") === "streetview") {
          const pov = utils.getData(itm, "pov");
          const mapOptions = {
            position: { lat: Number(latLng[0]), lng: Number(latLng[1]) },
            pov,
            zoom,
            gestureHandling: "none",
            scrollwheel: false,
          };
  
          return new window.google.maps.StreetViewPanorama(
            mapElement,
            mapOptions
          );
        }
  
        const mapOptions = {
          zoom,
          scrollwheel: utils.getData(itm, "scrollwheel"),
          center: new window.google.maps.LatLng(latLng[0], latLng[1]),
          styles:
            localStorage.getItem("theme") === "dark"
              ? mapStyles.Cobalt
              : mapStyles[mapStyle],
        };
  
        const map = new window.google.maps.Map(mapElement, mapOptions);
        const infowindow = new window.google.maps.InfoWindow({
          content: markerPopup,
        });
        const marker = new window.google.maps.Marker({
          position: new window.google.maps.LatLng(latLng[0], latLng[1]),
          icon,
          map,
        });
  
        marker.addListener("click", () => {
          infowindow.open(map, marker);
        });
  
        themeController &&
          themeController.addEventListener(
            "clickControl",
            ({ detail: { control, value } }) => {
              if (control === "theme") {
                map.set(
                  "styles",
                  value === "dark" ? mapStyles.Cobalt : mapStyles[mapStyle]
                );
              }
            }
          );
        return null;
      });
    }
  }
  
  export default initMap;
  