<template>
  <div class="static-location-widget h-100">
    <div class="location-wrap h-100">
      <div :id="widgetId" class="location-map"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      map: null,
      mapLocations: []
    }
  },
  props: {
    visualProperties: {
      type: Object,
      required: true
    },
    series: {
      type: Array,
      required: true
    },
    widgetId: {
      type: String,
      required: true
    }
  },
  methods: {
    createMap () {
      this.map = new google.maps.Map(document.getElementById(this.widgetId), {
        center: { lat: this.mapLocations[0].lat, lng: this.mapLocations[0].lng },
        zoom: this.visualProperties.map_setting.zoom,
        streetViewControl: true,
        mapTypeControl: true,
        fullScreenContorl: true,
        zoomControl: true,
        mapTypeId: this.visualProperties.map_setting.mapTypeId
      })
      if (this.visualProperties.map_setting.mapTraffic === 'traffic') {
        const trafficLayer = new google.maps.TrafficLayer()
        trafficLayer.setMap(this.map)
      } else if (this.visualProperties.map_setting.mapTraffic === 'transit') {
        const transitLayer = new google.maps.TransitLayer()
        transitLayer.setMap(this.map)
      }
      this.mapLocations.forEach(location => {
        if (location.lat && location.lng) {
          this.setMarker({ lat: location.lat, lng: location.lng }, { markerColor: location.location_settings.marker_color, markerIcon: location.location_settings.marker_icon })
        }
      })
    },
    setMarker (position, markerStyle) {
      const svgMarker = {
        path: markerStyle.markerIcon,
        fillColor: markerStyle.markerColor,
        fillOpacity: 1,
        strokeWeight: 0,
        rotation: 0,
        scale: 2,
        anchor: new google.maps.Point(15, 30),
      }

      const markers = new google.maps.Marker({
        position: position,
        map: this.map,
        icon: svgMarker,
        lable: {
          text: 'A',
          color: '#FFF'
        }
      })
    },
    resizeWidget () {
    }
  },
  mounted () {
    this.mapLocations = this.visualProperties.locations
    this.createMap()
  }
}
</script>

<style lang="scss" scoped>
  .static-location-widget {
    .location-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      .condition-text-wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .location-map {
        width: 100%;
        height: 100%;
      }
    }

  }
</style>
