document.addEventListener('alpine:init', () => {
    Alpine.directive('hx-val', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
        var config = function(evt) {
            evt.detail.parameters[value] = evaluate(expression); // add a new parameter into the request
        }
        el.addEventListener('htmx:configRequest', config);
        cleanup(() => {
            el.removeEventListener('htmx:configRequest', config);
        })
    })
Alpine.directive('hx-header', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
        var config = function(evt) {
            evt.detail.headers[value] = evaluate(expression); // add a new parameter into the request
        }
        el.addEventListener('htmx:configRequest', config);
        cleanup(() => {
            el.removeEventListener('htmx:configRequest', config);
        })
    })

    Alpine.directive('dispatch', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
        let dependent_properties = evaluateLater(expression)
    
        effect(() => {
            dependent_properties(props => {
                el.dispatchEvent(
                    new CustomEvent(value, {
                        props,
                        bubbles: true,
                        // Allows events to pass the shadow DOM barrier.
                        composed: true,
                        cancelable: true,
                    })
                )
            })
        })
    })
    Alpine.directive(
        "destroy",
        (el, { expression }, { evaluateLater, cleanup }) => {
          const onDestroy = evaluateLater(expression);
          cleanup(onDestroy);
        }
      );
Alpine.directive('popper', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate, Alpine}) => {
    let dependent_properties = evaluate(expression)
    let tooltip = evaluate(dependent_properties['tooltip'])
    let source = evaluate(dependent_properties['source'])

    let popper = Popper.createPopper(source, tooltip, {placement: 'bottom', strategy: 'fixed', modifiers: [{name: 'preventOverflow'}, {name: 'offset', options: {offset: [0, 10]}}]});;
    let d=Alpine.reactive({show: false});
    tooltip.classList.add('opacity-0', 'transition-opacity')

    let show = () => d.show = true;
    let  hide = () => d.show = false;
    source.addEventListener('mouseover', show)
    source.addEventListener('mouseout', hide)
    effect(() => {
        if (d.show) {
            tooltip.classList.remove('opacity-0')
        } else {
            tooltip.classList.add('opacity-0')
        }
        
    })
    cleanup(() => {popper.destroy(); source.removeEventListener('mouseover', show); source.removeEventListener('mouseout', hide) })
    })
})