<template>
  <section class="tip_map">
    <div class="tip_map-container" ref="map"></div>
  </section>
</template>

<script lang="ts">
import { Config } from '~/store';
import { Vue, Prop, Watch } from 'vue-property-decorator';
import Component from 'nuxt-class-component';
import { Category } from '~/services/categories';
import { ITipsService, Tip } from '~/services/tips';
import { IMapService } from '~/services/map';
import { Inject } from '~/core';

@Component
export default class extends Vue {
  public map: any = null;

  @Prop({ type: Object, required: false }) selectedTip: Tip | null;
  @Prop({ type: Object, required: true }) category: Category;
  @Inject() config: Config;
  @Inject() mapService: IMapService;

  public async mounted(): Promise<any> {
    if (process.server) {
      return;
    }

    this.map = await this.mapService.createMap(
      this.$refs.map as HTMLElement,
      {lat: this.selectedTip.latitude, lng: this.selectedTip.longitude}
    );

    this.mapService.addPinsFromCategory(this.map, this.category);

    if (this.$refs.map) {
      // this.fixMapSize();
    }

  }

  public destroyed(): void {
    if (this.map) {
      // this.map.remove();
    }
  }

  private fixMapSize(): void {
    const $mapContainer = this.$refs.map as HTMLElement;
    const $mapCanvas = $mapContainer.querySelector(
      '.mapboxgl-canvas'
    ) as HTMLElement;

    $mapContainer.style.height = $mapCanvas.style.height;
  }


  @Watch('selectedTip')
  watchTip() {
    //fly to location
    //create popup at location
  }
}
</script>

<style lang='scss' scoped>
.tip_map {
  position: relative;

  &-container {
    width:100%;
    height:600px;
  }

  /deep/ .mapboxgl-marker {
    width: 1.5rem;
    height: 1.5rem;
    background-size: cover;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid gray;
    background-color: yellow;
  }

  /deep/ .mapboxgl-popup {
    max-width: 12.5rem;
  }

  /deep/ .mapboxgl-popup-content {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
  }
}
</style>