<template>
    <div id="infoBulleContainer" :style="{top: posY + 'px', left: posX + 'px'}" @closeInfo="hideBubble">
      <div v-show="isActive">{{bubbleContent}}</div>
    </div>
</template>

<style scoped>
  /*================= Mise en page:
    => Mobile First : par défaut, moins de 500px
    => Tablette et PC format haut : de 500 à 1000px
    => PC large : à partir de 1000px
  */

  /*+++++++++++++++++ COPYBOX
      ================ PC HAUT/IPAD
      @media(min-width:500px){}
      ================ PC LARGE
      @media(min-width:1000px){}
  */

  #infoBulleContainer{
    width:161px;
    position:fixed;
    height:20px;
    background-color: transparent;
    z-index: 333;
    pointer-events: none;
  }

  #infoBulleContainer div{
    visibility: visible;
    text-align: center;
    width: 100%;
    height: 100%;
    color: var(--back-color);
    border-color: var(--back-color);
    border-style: solid;
    border-width: thin;
    font-family: 'velvelyne';
    font-weight: bold;
    font-size: 10px;
    line-height: 0.5em;
    padding: 0;
    margin: 0;
    border-radius: 33px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    animation: blinkBack 1.61s infinite;
    pointer-events: none;
  }



  /*================ PC LARGE*/
  @media(min-width:800px){
    #infoBulleContainer div{
      visibility: visible;
      font-size: 13.12px;
    }
  }
</style>

<script>
  export default {
    name : 'Infobulle',
    data(){
      return{
        isActive: false,
        posX: 0,
        posY: 0,
        bubbleContent:"",
        hideTimer: null
      }
    },
    methods:{
      async loadBubble(event){
        let item = event.target
        if (!item.dataset.tooltip) {
          this.hideBubble();
          return
        }
        this.bubbleContent = item.dataset.tooltip;
        this.posX = event.clientX - 161;
        if(this.posX<0){
          this.posX = event.clientX + 33;
        }
        this.posY = event.clientY + 13.12;
        this.isActive = true;
        clearTimeout(this.hideTimer)

        this.hideTimer = setTimeout(() => {
          this.hideBubble();
        }, 1312)
      },
      hideBubble(){
        this.isActive = false
      }
    },
    mounted(){
      document.addEventListener('mousemove', this.loadBubble);
      document.addEventListener('hideBubble', this.hideBubble);
      console.log("Info-bubble is loaded!");
    }
  };
</script>
