<template>
  <Dropdown :shown="open" @show="onShow" @hide="onHide">
    <slot></slot>
    <div slot="popper"></div>
  </Dropdown>
</template>

<script>
import { Dropdown } from 'v-tooltip'

export default {
  name: 'Popover',
  components: {
    Dropdown,
  },
  data() {
    return {
      autoHide_: this.autoHide,
      isOpened: false,
    }
  },
  watch: {
    autoHide(newValue) {
      this.autoHide_ = newValue
    },
  },
  methods: {
    setParentAutoHideToFalse() {
      let parent = this.$parent
      while (parent) {
        if (parent.$el.classList.contains('v-popper') && parent.isOpened) {
          parent.autoHide_ = false
          if (parent.$el.parentNode === document.body) {
            break
          }
        }
        parent = parent.$parent
      }
    },
    setParentAutoHideToTrue() {
      let parent = this.$parent
      while (parent) {
        if (parent.$el.classList.contains('v-popper') && parent.isOpened) {
          parent.autoHide_ = true
          break
        }
        parent = parent.$parent
      }
    },
    onShow() {
      this.isOpened = true
      setTimeout(() => this.setParentAutoHideToFalse(), 200)
    },
    onHide() {
      this.isOpened = false
      setTimeout(() => this.setParentAutoHideToTrue(), 100)
    },
  },
}
</script>