<template>
  
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div class="obfuscated_map">
      
      <div class="header">
        <div class="title-paragraph">
          <h2 v-html="titleText()" v-if="properties['Title 1'].value || properties['Title 2'].value"></h2>
          <p v-html="properties['Paragraph Text'].value" class="paragraph" v-if="properties['Paragraph Text'].value"></p>
        </div>
      </div>
      
      <div class="barnacle_obfuscated_map"></div>
    
    </div>
  
  </div>

</template>

<script>
  // import MarkerClusterer from 'v3-utility-library/markerclusterer';

  export default {
    name: "BuildableObfuscatedMap",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      return JSON.parse(this.componentData);
    },
    computed: {
      locations() {
        return this.properties ? this.properties['Locations'] : [];
      }
    },
    mounted() {
      this.kickOffMaps();
    },
    methods: {
      titleText() {
        if (!!this.properties['Title 1'].value && !!this.properties['Title 2'].value) {
          return this.properties['Title 1'].value + ' <span class="yellow-text">' + this.properties['Title 2'].value + '</span>';
        }
        else if (!!this.properties['Title 1'].value) {
          return this.properties['Title 1'].value;
        }
        else if (!!this.properties['Title 2'].value) {
          return this.properties['Title 2'].value;
        }
      },
      kickOffMaps() {
        let intervalId = setInterval(() => {
          if (window.mapsReady === true) {

            let map;
            map = this.initializeMultiPlaceMap(map, this.locations, ".barnacle_obfuscated_map");

            google.maps.event.addDomListener(window, "resize", () => {
              if (window.innerWidth <= 800) {
                let center = new google.maps.LatLng(55, -98.5795);
                map.setZoom(3);
                map.setCenter(center);
              } else if (window.innerWidth >= 1300) {
                let center = new google.maps.LatLng(41.5, -98.5795);
                map.setZoom(5);
                map.setCenter(center);
              } else if (window.innerWidth >= 1800) {
                center = new google.maps.LatLng(41.5, -98.5795);
                zoom = 6;
              } else {
                let center = new google.maps.LatLng(41.5, -98.5795);
                map.setZoom(4);
                map.setCenter(center);

                // let left = new google.maps.LatLng(36, -129);
                // let right = new google.maps.LatLng(36, -70);
                // let bounds = new google.maps.LatLngBounds();
                // bounds.extend(left);
                // bounds.extend(right);
                // map.fitBounds(bounds);
              }
            });

            window.clearInterval(intervalId);
          }
        }, 250);
      },
      initializeMultiPlaceMap(map, places, mapClass) {
        let barnacleObfuscatedMap = document.querySelector(mapClass);

        let center;
        let zoom;
        if (window.innerWidth < 800) {
          center = new google.maps.LatLng(55, -98.5795);
          zoom = 3;
        } else if (window.innerWidth >= 1300) {
          center = new google.maps.LatLng(41.5, -98.5795);
          zoom = 5;
        } else if (window.innerWidth >= 1800) {
          center = new google.maps.LatLng(41.5, -98.5795);
          zoom = 6;
        } else {
          center = new google.maps.LatLng(41.5, -98.5795);
          zoom = 4;
        }

        let options = {
          center: center,
          zoom: zoom,
          disableDefaultUI: true,
          scrollwheel: false,
          styles: [
            {
              "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": "all",
              "stylers": [
                {
                  "visibility": "on"
                },
                {
                  "color": "#c0bebe"
                },
                {
                  "weight": "0.01"
                }
              ]
            },
            {
              "featureType": "administrative",
              "elementType": "geometry",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "administrative",
              "elementType": "geometry.fill",
              "stylers": [
                {
                  "color": "#000000"
                },
                {
                  "lightness": 20
                },
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "administrative",
              "elementType": "geometry.stroke",
              "stylers": [
                {
                  "color": "#ffffff"
                },
                {
                  "lightness": "-20"
                },
                {
                  "weight": "0.90"
                },
                {
                  "gamma": "0.26"
                },
                {
                  "visibility": "on"
                }
              ]
            },
            {
              "featureType": "administrative",
              "elementType": "labels",
              "stylers": [
                {
                  "weight": "0.48"
                }
              ]
            },
            {
              "featureType": "administrative.country",
              "elementType": "all",
              "stylers": [
                {
                  "visibility": "simplified"
                }
              ]
            },
            {
              "featureType": "administrative.country",
              "elementType": "geometry.fill",
              "stylers": [
                {
                  "visibility": "off"
                },
                {
                  "color": "#000000"
                },
                {
                  "weight": "0.33"
                }
              ]
            },
            {
              "featureType": "administrative.country",
              "elementType": "geometry.stroke",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "administrative.province",
              "elementType": "all",
              "stylers": [
                {
                  "visibility": "simplified"
                }
              ]
            },
            {
              "featureType": "administrative.province",
              "elementType": "geometry",
              "stylers": [
                {
                  "visibility": "on"
                }
              ]
            },
            {
              "featureType": "administrative.province",
              "elementType": "labels",
              "stylers": [
                {
                  "visibility": "simplified"
                }
              ]
            },
            {
              "featureType": "administrative.province",
              "elementType": "labels.text",
              "stylers": [
                {
                  "visibility": "simplified"
                }
              ]
            },
            {
              "featureType": "administrative.locality",
              "elementType": "all",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "administrative.neighborhood",
              "elementType": "all",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "administrative.land_parcel",
              "elementType": "all",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "administrative.land_parcel",
              "elementType": "geometry.stroke",
              "stylers": [
                {
                  "visibility": "on"
                },
                {
                  "hue": "#ff0000"
                }
              ]
            },
            {
              "featureType": "administrative.land_parcel",
              "elementType": "labels.text.stroke",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "landscape",
              "elementType": "all",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "landscape",
              "elementType": "geometry",
              "stylers": [
                {
                  "color": "#1c1b1b"
                },
                {
                  "lightness": 20
                }
              ]
            },
            {
              "featureType": "landscape.natural",
              "elementType": "all",
              "stylers": [
                {
                  "visibility": "simplified"
                }
              ]
            },
            {
              "featureType": "poi",
              "elementType": "all",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "poi",
              "elementType": "geometry",
              "stylers": [
                {
                  "color": "#000000"
                },
                {
                  "lightness": 21
                }
              ]
            },
            {
              "featureType": "road.highway",
              "elementType": "all",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "road.highway",
              "elementType": "geometry",
              "stylers": [
                {
                  "visibility": "on"
                }
              ]
            },
            {
              "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": "all",
              "stylers": [
                {
                  "visibility": "off"
                }
              ]
            },
            {
              "featureType": "transit",
              "elementType": "geometry",
              "stylers": [
                {
                  "color": "#000000"
                },
                {
                  "lightness": 19
                }
              ]
            },
            {
              "featureType": "water",
              "elementType": "all",
              "stylers": [
                {
                  "color": "#ffffff"
                }
              ]
            },
            {
              "featureType": "water",
              "elementType": "geometry",
              "stylers": [
                {
                  "color": "#000000"
                },
                {
                  "lightness": 17
                }
              ]
            }
          ]
        };

        map = new google.maps.Map(barnacleObfuscatedMap, options);

        // let clustererOptions = {
        //   styles: [
        //     {
        //       textColor: '#ffffff',
        //       url: 'data:image/svg+xml;utf-8,<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Map-Light"> <g id="marker"> <circle fill="' + fillColor + '" opacity="0.474694293" cx="25" cy="25" r="25"></circle> <circle fill="' + fillColor + '" opacity="0.797101449" cx="25" cy="25" r="15"></circle> </g> </g> </g> </svg>',
        //       height: 50,
        //       width: 50
        //     }
        //   ]
        // };

        // var bounds = new google.maps.LatLngBounds();

        // let markerClusterer = new MarkerClusterer(map, null, clustererOptions);

        places.forEach((place, index) => {
          if (!!place.lat && !!place.lng) {
            let title = (index % 3 === 0) ? 'pulse_me' : 'no_pulse';
            let self = this;
            window.setTimeout(function () {

              let iconObj = '';

              if (self.properties['Pin Icon']) {
                let scaledWidth = window.innerWidth < 800 ? (self.properties['Pin Icon'].value.width / 2) : self.properties['Pin Icon'].value.width;
                let scaledHeight = window.innerWidth < 800 ? (self.properties['Pin Icon'].value.height / 2) : self.properties['Pin Icon'].value.height;

                iconObj = {
                  url: self.properties['Pin Icon'].value.url,
                  scaledSize: new google.maps.Size(scaledWidth, scaledHeight),
                }
              }

              let marker = new google.maps.Marker({
                map: map,
                icon: iconObj,
                position: {
                  lat: parseFloat(place.lat),
                  lng: parseFloat(place.lng)
                },
                title: title
              });

              marker.set("id", place.id);
            }, (10 * index));

            // bounds.extend(marker.getPosition());
          }

          // markerClusterer.addMarker(marker);
        });

        // map.fitBounds(bounds);

        return map;
      }
    }
  }
</script>

<style scoped>

</style>