import { Controller } from '@hotwired/stimulus'
import tippy, { hideAll } from 'tippy.js'

export default class extends Controller {
    static targets = ['trigger', 'template']
    static values = { content: String, placement: String }

    connect() {
        let options, element
        let placement = this.placementValue ? this.placementValue : 'top'
        if (this.hasTemplateTarget) {
            options = {
                content: this.templateTarget.innerHTML,
                placement,
                touch: true,
                trigger: 'click',
                allowHTML: true,
                interactive: true,
                appendTo: document.body,
            }
        } else {
            options = {
                content: this.contentValue,
                placement,
                touch: false,
                trigger: 'mouseenter focus',
                allowHTML: true,
                interactive: true,
                appendTo: document.body,
                onShow(instance) { hideAll({ exclude: instance }) },
            }
        }
        if (this.hasTriggerTarget) {
            element = this.triggerTarget
        } else {
            element = this.element
        }
        this.tooltip = tippy(element, options)
    }

    disconnect() {
        this.tooltip.destroy()
    }
}