<template       
 >
  <div class="tooltip" :style="{display: isPreviewing ? 'block' : 'none', left: `${pageX}px`, top: `${pageY}px`}" ref="tooltip">
    <template v-if="isPreviewing">
      <div
        v-for="property in Object.keys(getPreview.description)"
        :key="property"
      >{{property}}: {{getPreview.description[property]}}</div>
    </template>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      x: 0,
      y: 0
    };
  },
  computed: {
    ...mapGetters(["getPreview"]),
    isPreviewing() {
      return this.getPreview != null;
    },

    pageX() {
      if (this.$refs.tooltip != undefined) {
        // debugger;
        let tooltipWidth = this.$refs.tooltip.clientWidth;
        let latexExperience =
          document.documentElement.clientWidth - (this.x + tooltipWidth) - 4;
        if (latexExperience < 0) {
          return this.x - tooltipWidth - 2;
        }
      }
      return this.x + 2;
    },

    pageY() {
      if (this.$refs.tooltip != undefined) {
        // debugger;
        let tooltipHeight = this.$refs.tooltip.clientHeight;
        let latexExperience =
          document.documentElement.clientHeight - (this.y + tooltipHeight) - 4;
        if (latexExperience < 0) {
          return this.y -  tooltipHeight - 2;
        }
      }
      return this.y + 5;
    }
  },
  mounted() {
    this.$nextTick(() => {
      document.onmousemove = e => {
        this.x = e.clientX;
        this.y = e.clientY;
      };
    });
  }
};
</script>

<style scoped>
.tooltip {
  position: fixed;
  user-select: none;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 3px;
  z-index: 1;
  white-space: nowrap;
}
</style>