<template>
  <div>
    <span ref="target">
      <slot></slot>
    </span>

    <span ref="titleRef" class="hidden">
      <slot name="title"></slot>
    </span>

    <span ref="contentRef" class="hidden">
      <slot name="content"></slot>
    </span>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue"
import { defaultOptions, useAisPopover } from "@/composables/popover";
import { hasValue } from "@/util/util";
import { getDomElement } from "@/util/ais-floater";

const target = ref(null)
const titleRef = ref(null)
const contentRef = ref(null)


const props = defineProps({
  /* The item that the Popover floats around - if target is undefined then the trigger will be the target */
  target: { type: String, default: undefined },
  /* The item that triggers the Popover to show, when hovered/clicked/etc */
  trigger: { type: [Object, String], default: undefined },
  title: { type: String, default: defaultOptions.title },
  content: { type: String, default: defaultOptions.content },
  placement: { type: String, default: defaultOptions.placement },
  triggers: { type: String, default: defaultOptions.triggers },
  disabled: { type: Boolean, default: defaultOptions.disabled },
  arrow: { type: Boolean, default: defaultOptions.arrow },
  offset: { type: Number, default: defaultOptions.offset },
  flip: { type: Boolean, default: defaultOptions.flip },
  shift: { type: Number, default: defaultOptions.shift },
  allowHtml: { type: Boolean, default: defaultOptions.allowHtml },
  showOnLoad: { type: Boolean, default: defaultOptions.showOnLoad },
  maxWidth: { type: String, default: defaultOptions.maxWidth },
})

const titleText = computed(() => titleRef.value?.innerHTML ? titleRef.value.innerHTML: props.title)
const contentText = computed(() => contentRef.value?.innerHTML ? contentRef.value.innerHTML: props.content )

const options = computed(() => {
  const options = JSON.parse(JSON.stringify(defaultOptions))
  options.trigger = getDomElement(props.trigger)
  options.target = props.target
  options.title = titleText.value
  options.content = contentText.value
  options.placement = hasValue(props.placement) ? props.placement : options.placement
  options.triggers = hasValue(props.triggers) ? props.triggers : options.triggers
  options.arrow = props.arrow
  options.flip = props.flip
  options.offset = props.offset ? props.offset : options.offset
  options.shift = props.shift ? props.shift : options.shift
  options.disabled = props.disabled
  options.allowHtml = props.allowHtml
  options.showOnLoad = props.showOnLoad
  options.maxWidth = props.maxWidth
  return options
})

const getElement = computed(() => {
  let el = null;
  /* check slot first */
  if(target.value?.childElementCount > 0)
    el = target.value.children[0]

  /* then check 'target' prop */
  if(el == null && props.target)
      el = getDomElement(props.target)

  return el;
})

onMounted(() => {
  useAisPopover(getElement.value, options.value)
})
</script>

<script>
export default {
  name: "AisPopover"
}
</script>