import { Controller } from '@hotwired/stimulus'
import tippy 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,
            }
        } else {
            options = {
                content: this.contentValue,
                placement,
                touch: false,
                allowHTML: true,
                interactive: true,
            }
        }
        if (this.hasTriggerTarget) {
            element = this.triggerTarget
        } else {
            element = this.element
        }
        tippy(element, options)
    }
}