<template>
  <div class="app-tooltip">
    <IconBase
      @mouseover="hoverTooltip"
      @mouseleave="hover = false"
      icon-name="tooltip"
      :width="16"
      :height="16"
      :viewBox="'0 0 16 16'"
    >
      <slot>
        <IconTips />
      </slot>
    </IconBase>
    <transition name="fade">
      <div
        v-if="hover"
        :class="['app-tooltip-text', isTooltipRight ? 'app-tooltip-text--right' : '', isTooltipBottom ? 'app-tooltip-text--bottom' : '']"
        ref="tooltipText"
        v-html="text"
      ></div>
    </transition>
  </div>
</template>

<script>
import { IconBase, IconTips } from "../Icons/index";

export default {
  name: "app-tooltip",
  props: {
    text: {
      type: String,
      default: "",
    },

  },
  data() {
    return {
      hover: false,
      isTooltipRight: false,
      isTooltipBottom: false,
    };
  },
  components: {
    IconBase,
    IconTips,
  },
  methods: {
    hoverTooltip(e) {
      const $wrapper = document.body
      const $tooltip = this.$refs.tooltipText;
      this.hover = true;
      let x = e.clientX;
      let y = e.clientY;
      if (!!$wrapper && !!$tooltip) {
        this.isTooltipRight = x > ($wrapper.clientWidth - $tooltip.clientWidth - 30);
        this.isTooltipBottom = y > ($wrapper.clientHeight - window.pageYOffset - $tooltip.clientHeight - 30)
      }
    },
  },
};
</script>

<style lang="sass" scoped>

@import "../../assets/_vars"

.app-tooltip
  display: inline-flex
  position: relative
  padding: 2px 12px
  cursor: pointer
  &-text
    position: absolute
    left: 36px
    top: -4px
    z-index: 1
    padding: 16px
    background: #FFFFFF
    box-shadow: 0px 3px 14px rgba(55, 71, 79, 0.3)
    border-radius: 3px
    white-space: break-spaces
    max-width: 300px
    width: max-content
    transition: all 00.3s ease
    font-size: 12px
    line-height: 16px
    color: $gray3
    &--right
      left: auto
      right: 36px
    &--bottom
      top: auto
      bottom: -4px
</style>