<template>
  <div class="boxCesiumMap" v-loading="!mapIsLoaded">
    <div id="cesium-container" class="cesium"/>
    <div id="credit-display" class="credit"/>
    <MapZoom
      data-id="map-zoom"
      class="panel-dashboard__tools panel-dashboard__tools--bottom-left-out"
      @zoomIn="zoomIn"
      @zoomOut="zoomOut"
    />
  </div>
</template>

<script>
/* eslint-disable no-undef */

import {mapGetters, mapMutations} from 'vuex';

import MapZoom from '@/components/map/MapZoom';

const cesiumConfig = {
  infoBox: false,
  timeline: false,
  geocoder: false,
  animation: false,
  homeButton: false,
  scene3DOnly: false,
  sceneModePicker: false,
  baseLayerPicker: false,
  fullscreenButton: false,
  requestRenderMode: true,
  maximumRenderTimeChange: Infinity,
  selectionIndicator: false,
  navigationHelpButton: false,
  creditContainer: 'credit-display',
  sceneMode: Cesium.SceneMode.SCENE3D,
  imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
    url:
      'https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer',
  }),
};

const initialPosition = {
  coordinates: [-3.7004, 40.41465],
  zoom: 1481485,
};

export default {
  name: 'cesium-map',
  props: {collection: Object},
  components: {MapZoom},
  mounted() {
    viewer = new Cesium.Viewer('cesium-container', cesiumConfig);
    this.toogleMapIsRendering({mapIsLoaded: true});
    cameraToPosition('fly', initialPosition.coordinates, initialPosition.zoom);
    const eventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    eventHandler.setInputAction((event) => {
      const selected = viewer.scene.pick(event.position);
      if (Cesium.defined(selected)) {
        this.$emit('entity-selected', selected);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  },
  computed: {...mapGetters(['mapIsLoaded'])},
  watch: {
    collection(newCollection) {
      if (newCollection && newCollection.features) {
        createLayer(
          this.collection,
          'entity',
          'point',
          'billboard',
          ['static/icon_motion_dentro_poi.svg', 'static/icon_motion_dentro_poi.svg', 0.8],
          'showLayer', 'enablePicking', 'disablePopup', 'enableClustering',
          [
            'static/icon_motion_dentro_poi.svg', 100, 2, 20,
          ],
        );
      }
    },
  },
  methods: {
    ...mapMutations(['toogleMapIsRendering']),
    emitZoomChange() {
      const extent = getExtent();
      const rectangle = new Cesium.Rectangle(extent.west, extent.south, extent.east, extent.north);
      const mapExtent = {
        northeast: Cesium.Rectangle.northeast(rectangle),
        northwest: Cesium.Rectangle.northwest(rectangle),
        southeast: Cesium.Rectangle.southeast(rectangle),
        southwest: Cesium.Rectangle.southwest(rectangle),
      };
      const cameraHeight = getCameraHeight();
      this.$emit('zoom-change', {mapExtent, cameraHeight});
    },
    zoomIn() {
      cameraZoom('zoomIn');
      this.emitZoomChange();
    },
    zoomOut() {
      cameraZoom('zoomOut');
      this.emitZoomChange();
    },
  },
};

/* eslint-enable no-undef */
</script>

<style lang="scss" scoped>
.boxCesiumMap {
  position: relative;
  background-color: #d9dfe1;
  .cesium {
    height: calc(100vh - 130px);
    width: 100%;
  }
  .credit {
    display: none;
  }
}
</style>
