<script>
// import { RouterLink, RouterView } from 'vue-router'

import { mapState, mapActions } from 'pinia'
// import { UserStore } from '@/stores/user'
import { ConcernementsStore } from '@/stores/concernements'

export default {
  name: 'concernementMapPopup',  
  props: ['infos'],
  data() {
    return {
      dom: null,
      type: null,
      concernement: null,
      entite: null
    }
  },
  created () {
    // console.log(`popup created type: ${this.infos.type}`);
    if (this.infos.type === 'concernement') {
      this.concernement = this.concernementsByID[this.infos.id];
    } else {
      this.entite = this.allEntitesById[this.infos.id];
    }
  },
  mounted () {
    // console.log('APP onMounted')
    this.dom = this.$refs['map-popup'];
    window.addEventListener('mousemove', this.onMousemove);
  },
  computed: {
    ...mapState(ConcernementsStore,['concernements']),
    ...mapState(ConcernementsStore,['concernementsByID']),
    ...mapState(ConcernementsStore,['allEntitesById'])
  },
  watch: {
    infos: {
      handler (n, o){
        if (n.type === 'concernement') {
          this.concernement = this.concernementsByID[n.id];
        } else {
          this.entite = this.allEntitesById[n.id];
        }   
      },
      deep: true
    },
  },
  methods: {
    onMousemove(e){
      // console.log(`popup move type: ${this.infos.type}`);
      this.dom.style.left = `${e.clientX + 5}px`;
      this.dom.style.top = `${e.clientY - this.dom.clientHeight - 5}px`;
    }
  },
  components: {
  }
}

</script>

<template>
  <div id="map-popup" ref="map-popup">
    <section v-if="infos.type === 'concernement'" class="concernement-map-popup">
      <h1>{{ concernement.title }}</h1>
    </section>
    <section v-if="infos.type === 'entite'" class="entite-map-popup">
      <h1>{{ entite.entite.title }}</h1>
    </section>
  </div>
</template>

<style lang="scss" scoped>
</style>
