<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>

const currentInstance = getCurrentInstance()

const $autoHide = ref()
const setParentAutoHide = (bool) => {
  let parent = currentInstance.parent
  while (parent) {
    const el = parent.proxy?.$el
    if (el?.classList?.contains('v-popper') && parent.exposed?.isOpen) {
      parent.exposed.$autoHide.value = bool
      if (el.parentNode === document.body) {
        break
      }
    }
    parent = parent.parent
  }
}

const onShow = () => {
  setTimeout(() => setParentAutoHide(false), 200)
}
const onHide = () => {
  setTimeout(() => setParentAutoHide(true), 100)
}

defineExpose({
  $autoHide,
})