<template>
  <div id="app" class="flex flex-col full">
    <select v-model="editMode">
      <option :value="true">editables</option>
      <option :value="false">no editables</option>
    </select>

    <div class="flex-1 relative">
      <div class="flex flex-row full">
        <div class="flex-1 relative">
          <bvue-gmap :zoom="6" @click="clicked" class="full"
            :options="mapOptions"/>
        </div>
        <div class="flex-1 relative overflow-auto">
          <bvue-gmap-static :zoom="9" :width="200" :height="200" :center="[-2,43]" />
          <bvue-gmap-static :center="[-2,43.1]" :options="{sensor: true} "/>
        </div>
        <div class="flex-1 relative">
          <div class="full flex flex-col">
            <div class="flex-1 relative">
              <bvue-gmap-marker :zoom="12" @click="clicked" class="full"
                :editable="editMode"
                v-model="markers[0].location"
                @marker-click="markerClicked"
                icon="http://via.placeholder.com/100">
                <!-- <info-window :data="{name: 'JuaJuaJua'}"></info-window> -->
              </bvue-gmap-marker>
            </div>
            <small>{{markers[0].location}}</small>
          </div>
        </div>
      </div>
    </div>

    <div class="flex-1 relative">
      <div class="flex flex-row full">
        <div class="flex-1 relative">
          <bvue-gmap-kml class="full"
            src="https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml"
            :options="{suppressInfoWindows: true, preserveViewport: false}" />
        </div>
        <div class="flex-1 relative">
          <bvue-gmap-markers :zoom="12" @click="clicked" class="full"
            :editable="editMode"
            :items="markers"
            location-field="location"
            id-field="_id"
            @marker-update="markerUpdate"
            @marker-click="markerClicked"
            icon-field="icon" />
        </div>
        <div class="flex-1 relative">
          <bvue-gmap-geojson :zoom="11" @click="clicked" class="full" :data="feature" :styler="geojsonStyler" />
        </div>
        <div class="flex-1 relative">
          <bvue-gmap-geojson ref="geoCol" :zoom="12" @click="clicked" class="w-full" :data="featureCollection" />
          <button @click="aplyGeoCollection" class="bg-blue w-full text-white p-1 hover:bg-blue-dark">apply</button>
          <div>{{featureCollection}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import InfoWindow from '@/components/InfoWindow'

export default {
  components: {InfoWindow},
  name: 'App',
  data () {
    return {
      editMode: true,
      markers,
      feature,
      mapOptions: {},
      featureCollection
    }
  },
  mounted () {
    console.log(this)
    setTimeout(() => {
      this.mapOptions = {
        styles: [
          {featureType: 'all', elementType: 'all', stylers: [{visibility: 'off'}]},
          {featureType: 'landscape', elementType: 'geometry', stylers: [{visibility: 'on'}, {color: '#fcfcfc'}]},
          {featureType: 'water', elementType: 'labels', stylers: [{visibility: 'off'}]},
          {featureType: 'water', elementType: 'geometry', stylers: [{visibility: 'on'}, {hue: '#5f94ff'}, {lightness: 60}]}
        ]
      }
    }, 1000)
  },
  methods: {
    markerClicked (marker, data = {title: 'simle marker'}) {
      var infowindow = new google.maps.InfoWindow({content: `<div>${data.title}</div>`})
      infowindow.open(marker.map, marker);
    },
    markerUpdate (index, position) {
      Vue.set(this.markers[index], 'location', position)
    },
    clicked (data) {
      console.log('clicked on some map in coords :: ', data)
    },
    aplyGeoCollection () {
      this.featureCollection = this.$refs.geoCol.getGeojson()
    },
    geojsonStyler (feature) {
      console.log('geojsonStyler', feature)
      return {
        icon: {
          // para radar points
          path: google.maps.SymbolPath.CIRCLE,
          strokeWeight: 0.5,
          strokeColor: 'red',
          fillColor: 'red',
          fillOpacity: 0.5,
          scale: 1
        }
      }
    }
  }
}

const COORDS = [
  [-2.97774451, 43.24928996],
  // [-2.97756393, 43.24954412],
  // [-2.97712037, 43.24975113],
  // [-2.97662757, 43.24987709],
  // [-2.97645816, 43.2499581],
  [-2.97622097, 43.25007511],
  // [-2.97463053, 43.25310932],
  // [-2.97413724, 43.25425279],
  // [-2.97318014, 43.25512602],
  // [-2.97249803, 43.25574717],
  // [-2.97154851, 43.25756586],
  // [-2.97079657, 43.25837158],
  // [-2.97062399, 43.25855613],
  // [-2.97406929, 43.26857914],
  // [-2.97530062, 43.27077654],
  // [-2.97675408, 43.2724157],
  // [-2.97727136, 43.2731722],
  // [-2.97734517, 43.27351439],
  // [-2.97695075, 43.27465789],
  // [-2.97686399, 43.27491],
  // [-2.97652557, 43.27562579],
  // [-2.97341276, 43.28202739],
  // [-2.97277209, 43.28234239],
  // [-2.97207284, 43.2826934],
  [-2.97184435, 43.28286893],
  // [-2.97175181, 43.28307601],
  // [-2.97159758, 43.28341815],
  // [-2.97153485, 43.28409348],
  // [-2.95674044, 43.29009483],
  // [-2.95326703, 43.28659065],
  // [-2.94980123, 43.28914648],
  // [-2.94789421, 43.28897903],
  // [-2.94687527, 43.28765678],
  // [-2.94706516, 43.28734693],
  // [-2.94803685, 43.28549963],
  // [-2.94855761, 43.28480471],
  // [-2.94885432, 43.2835562],
  // [-2.91524143, 43.27990059],
  // [-2.91493013, 43.28043755],
  // [-2.91539219, 43.2815368],
  // [-2.9164037, 43.28287183],
  // [-2.91695925, 43.28477364],
  // [-2.91673582, 43.28562665],
  // [-2.91236697, 43.28562132],
  // [-2.91051962, 43.28582988],
  // [-2.90957415, 43.2841],
  // [-2.90930084, 43.28400562],
  // [-2.90821358, 43.2835348],
  // [-2.90739506, 43.28226793],
  // [-2.90650313, 43.28243561],
  // [-2.90582607, 43.2819434],
  // [-2.9057832, 43.28170004],
  // [-2.9046254, 43.28075437],
  // [-2.88028894, 43.26513943],
  // [-2.8803439, 43.26476489],
  // [-2.88035638, 43.26468297],
  // [-2.88037886, 43.26452901],
  // [-2.88039134, 43.26445158],
  // [-2.88040882, 43.26433274],
  // [-2.88062089, 43.26290316],
  // [-2.88142175, 43.26051043],
  // [-2.8814267, 43.26049873],
  [-2.88143906, 43.26047803],
  // [-2.8830281, 43.25939011],
  // [-2.88304913, 43.25934511],
  // [-2.88308001, 43.25930462],
  // [-2.88312443, 43.25926865],
  // [-2.88316762, 43.25923448],
  // [-2.88320588, 43.2591985],
  // [-2.883254, 43.25916613],
  // [-2.88331071, 43.25914638],
  // [-2.88340576, 43.25910791],
  // [-2.88376662, 43.25912163],
  // [-2.88485829, 43.25649518],
  // [-2.88485738, 43.25632499],
  // [-2.88485739, 43.25632139],
  // [-2.88485748, 43.25627187],
  // [-2.88485786, 43.25619271],
  // [-2.88496352, 43.25622695],
  // [-2.88499807, 43.25620087],
  // [-2.88648145, 43.25551891],
  // [-2.88654185, 43.25550186],
  // [-2.88659733, 43.2554812],
  // [-2.88664912, 43.25545244],
  // [-2.88748471, 43.25462934],
  // [-2.88752051, 43.25459066],
  // [-2.88757231, 43.25456009],
  // [-2.88763025, 43.25453854],
  // [-2.88768941, 43.25452419],
  // [-2.88774857, 43.25450984],
  // [-2.88780896, 43.25449819],
  // [-2.89046901, 43.25288662],
  // [-2.89055041, 43.25296287],
  // [-2.89063035, 43.25303768],
  // [-2.89064634, 43.25305211],
  // [-2.89072259, 43.25312332],
  // [-2.89073612, 43.25313594],
  [-2.89092306, 43.25330991],
  // [-2.89094767, 43.25332704],
  // [-2.89101412, 43.25336762],
  // [-2.89114336, 43.25343168],
  // [-2.89894671, 43.2496308],
  // [-2.89989689, 43.24864293],
  // [-2.90020409, 43.24835685],
  // [-2.90040148, 43.24817603],
  // [-2.90055197, 43.2480546],
  // [-2.90071104, 43.24795209],
  // [-2.90075913, 43.24792331],
  // [-2.90089354, 43.24784239],
  // [-2.90092189, 43.24782621],
  // [-2.91469459, 43.24555469],
  // [-2.91487699, 43.2454909],
  // [-2.91501257, 43.24543067],
  // [-2.91502983, 43.24542168],
  // [-2.91547242, 43.24515367],
  // [-2.91314914, 43.23236257],
  // [-2.91331051, 43.2322911],
  // [-2.91310302, 43.23188799],
  // [-2.91302192, 43.23176457],
  // [-2.91292231, 43.23166454],
  // [-2.91285096, 43.23160685],
  // [-2.90827979, 43.22294549],
  // [-2.90980001, 43.21941877],
  // [-2.91318077, 43.2184344],
  // [-2.91514209, 43.21765468],
  // [-2.91918666, 43.21660832],
  // [-2.9478504, 43.22220515],
  // [-2.94789908, 43.22287151],
  // [-2.94791073, 43.22362791],
  // [-2.94811974, 43.2239972],
  [-2.9837255, 43.24181922],
  // [-2.98398403, 43.24227849],
  // [-2.98404546, 43.2428548],
  // [-2.98414386, 43.24332306],
  // [-2.98439006, 43.24389039],
  // [-2.9847471, 43.24451176],
  // [-2.98534551, 43.24509264],
  // [-2.98564607, 43.24538533],
  // [-2.98442651, 43.24571834],
  // [-2.98440178, 43.24606951],
  // [-2.98383968, 43.24637109],
  // [-2.98366258, 43.24646561],
  // [-2.98335456, 43.24669068],
  // [-2.98299219, 43.24717237],
  // [-2.9829479, 43.2472309],
  // [-2.98215936, 43.24778005],
  // [-2.9809767, 43.24807701],
  // [-2.98029917, 43.24813091],
  // [-2.97937952, 43.24812174],
  // [-2.97932602, 43.24812173],
  // [-2.97896878, 43.24811716],
  // [-2.97879633, 43.24811262],
  // [-2.97837629, 43.24824761],
  // [-2.97813102, 43.24840965],
  // [-2.97798196, 43.24863473],
  // [-2.97794614, 43.24868875],
  [-2.97774451, 43.24928996]
]

const markers = COORDS.map((location, index) => ({
  _id: index,
  location,
  title: `title ${index}`,
  icon: `http://lorempixel.com/50/50/food/2`,
  description: `description ${index}`
}))

const feature = {
  type: 'Feature',
  geometry: {
    type: 'Polygon',
    coordinates: [COORDS]
  }
}

const featureCollection = {
  type: 'FeatureCollection',
  features: [feature]
}

</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.full {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
