<script>
import GoogleMapLoader from "@/global-components/GoogleMapLoader";
import MarkerClusterer from "@google/markerclusterer";

export default {
  extends: GoogleMapLoader,
  data() {
    return {
      apiKey: "",
      center: {
        lat: -6.2425342,
        lng: 106.8626478
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let self = this;
      let { google, map } = await this.initializeMap({
        apiKey: this.apiKey,
        mapConfig(google) {
          return {
            zoom: 10,
            styles: [
              {
                elementType: "geometry",
                stylers: [
                  {
                    color: "#f5f5f5"
                  }
                ]
              },
              {
                elementType: "labels.icon",
                stylers: [
                  {
                    visibility: "off"
                  }
                ]
              },
              {
                elementType: "labels.text.fill",
                stylers: [
                  {
                    color: "#616161"
                  }
                ]
              },
              {
                elementType: "labels.text.stroke",
                stylers: [
                  {
                    color: "#f5f5f5"
                  }
                ]
              },
              {
                featureType: "administrative.land_parcel",
                elementType: "labels",
                stylers: [
                  {
                    visibility: "off"
                  }
                ]
              },
              {
                featureType: "administrative.land_parcel",
                elementType: "labels.text.fill",
                stylers: [
                  {
                    color: "#bdbdbd"
                  }
                ]
              },
              {
                featureType: "poi",
                elementType: "geometry",
                stylers: [
                  {
                    color: "#eeeeee"
                  }
                ]
              },
              {
                featureType: "poi",
                elementType: "labels.text",
                stylers: [
                  {
                    visibility: "off"
                  }
                ]
              },
              {
                featureType: "poi",
                elementType: "labels.text.fill",
                stylers: [
                  {
                    color: "#757575"
                  }
                ]
              },
              {
                featureType: "poi.park",
                elementType: "geometry",
                stylers: [
                  {
                    color: "#e5e5e5"
                  }
                ]
              },
              {
                featureType: "poi.park",
                elementType: "geometry.fill",
                stylers: [
                  {
                    visibility: "off"
                  }
                ]
              },
              {
                featureType: "poi.park",
                elementType: "labels.text.fill",
                stylers: [
                  {
                    color: "#9e9e9e"
                  }
                ]
              },
              {
                featureType: "road",
                elementType: "geometry",
                stylers: [
                  {
                    color: "#ffffff"
                  }
                ]
              },
              {
                featureType: "road.arterial",
                elementType: "labels",
                stylers: [
                  {
                    visibility: "off"
                  }
                ]
              },
              {
                featureType: "road.arterial",
                elementType: "labels.text.fill",
                stylers: [
                  {
                    color: "#757575"
                  }
                ]
              },
              {
                featureType: "road.highway",
                elementType: "geometry",
                stylers: [
                  {
                    color: "#dadada"
                  }
                ]
              },
              {
                featureType: "road.highway",
                elementType: "labels",
                stylers: [
                  {
                    visibility: "off"
                  }
                ]
              },
              {
                featureType: "road.highway",
                elementType: "labels.text.fill",
                stylers: [
                  {
                    color: "#616161"
                  }
                ]
              },
              {
                featureType: "road.local",
                stylers: [
                  {
                    visibility: "off"
                  }
                ]
              },
              {
                featureType: "road.local",
                elementType: "labels",
                stylers: [
                  {
                    visibility: "off"
                  }
                ]
              },
              {
                featureType: "road.local",
                elementType: "labels.text.fill",
                stylers: [
                  {
                    color: "#9e9e9e"
                  }
                ]
              },
              {
                featureType: "transit.line",
                elementType: "geometry",
                stylers: [
                  {
                    color: "#e5e5e5"
                  }
                ]
              },
              {
                featureType: "transit.line",
                elementType: "geometry.fill",
                stylers: [
                  {
                    visibility: "off"
                  }
                ]
              },
              {
                featureType: "transit.station",
                elementType: "geometry",
                stylers: [
                  {
                    color: "#eeeeee"
                  }
                ]
              },
              {
                featureType: "transit.station",
                elementType: "geometry.fill",
                stylers: [
                  {
                    visibility: "off"
                  }
                ]
              },
              {
                featureType: "water",
                elementType: "geometry",
                stylers: [
                  {
                    color: "#c9c9c9"
                  }
                ]
              },
              {
                featureType: "water",
                elementType: "geometry.fill",
                stylers: [
                  {
                    color: "#e0e3e8"
                  }
                ]
              },
              {
                featureType: "water",
                elementType: "labels.text.fill",
                stylers: [
                  {
                    color: "#9e9e9e"
                  }
                ]
              }
            ],
            zoomControl: true,
            zoomControlOptions: {
              position: google.maps.ControlPosition.LEFT_BOTTOM
            },
            streetViewControl: false,
            center: self.center
          };
        }
      });

      let infoWindow = new google.maps.InfoWindow({
        minWidth: 400,
        maxWidth: 400
      });

      let location = require("@/assets/json/location.json");
      new MarkerClusterer(
        map,
        location.map(function(markerElem) {
          let point = new google.maps.LatLng(
            parseFloat(markerElem.latitude),
            parseFloat(markerElem.longitude)
          );
          let infowincontent = `
            <div class="font-medium">
              ${markerElem.name}
            </div>
            <div class="mt-1 text-gray-600">
              Latitude: ${markerElem.latitude}, Longitude: ${markerElem.longitude}
            </div>`;
          let marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: {
              url: require("@/assets/images/map-marker.png")
            }
          });

          google.maps.event.addListener(marker, "click", function() {
            infoWindow.setContent(infowincontent);
            google.maps.event.addListener(infoWindow, "domready", function() {
              $(".arrow_box")
                .closest(".gm-style-iw-d")
                .removeAttr("style");
              $(".arrow_box")
                .closest(".gm-style-iw-d")
                .attr("style", "overflow:visible");
              $(".arrow_box")
                .closest(".gm-style-iw-d")
                .parent()
                .removeAttr("style");
            });

            infoWindow.open(map, marker);
          });
          return marker;
        }),
        {
          styles: [
            {
              width: 51,
              height: 50,
              textColor: "white",
              url: require("@/assets/images/map-marker-region.png"),
              anchor: [0, 0]
            }
          ]
        }
      );
    }
  }
};
</script>
