const Default = {
    triggerType: 'hover',
    onShow: () => { },
    onHide: () => { },
    onToggle: () => { }
}

class Dial {
    constructor(parentEl = null, triggerEl = null, targetEl = null, options) {
        this._parentEl = parentEl
        this._triggerEl = triggerEl
        this._targetEl = targetEl
        this._options = { ...Default, ...options }
        this._visible = false
        this._init()
    }

    _init() {

        if (this._triggerEl) {
            const triggerEvents = this._getTriggerEvents()
            triggerEvents.showEvents.forEach(ev => {
                this._triggerEl.addEventListener(ev, () => {
                    this.show()
                })
                this._targetEl.addEventListener(ev, () => {
                    this.show()
                })
            })
            triggerEvents.hideEvents.forEach(ev => {
                this._parentEl.addEventListener(ev, () => {
                    setTimeout(() => {
                        if (!this._parentEl.matches(':hover')) {
                            this.hide()
                        }
                    }, 100)
                })
            })
        }

    }

    hide() {
        this._targetEl.classList.add('hidden')
        if (this._triggerEl) {
            this._triggerEl.setAttribute('aria-expanded', 'false')
        }
        this._visible = false

        // callback function
        this._options.onHide(this)
    }

    show() {
        this._targetEl.classList.remove('hidden')
        if (this._triggerEl) {
            this._triggerEl.setAttribute('aria-expanded', 'true')
        }
        this._visible = true

        // callback function
        this._options.onShow(this)
    }

    toggle() {
        if (this._visible) {
            this.hide()
        } else {
            this.show()
        }
    }

    _getTriggerEvents() {
        switch (this._options.triggerType) {
            case 'hover':
                return {
                    showEvents: ['mouseenter', 'focus'],
                    hideEvents: ['mouseleave', 'blur']
                }
            case 'click':
                return {
                    showEvents: ['click', 'focus'],
                    hideEvents: ['focusout', 'blur']
                }
            default:
                return {
                    showEvents: ['mouseenter', 'focus'],
                    hideEvents: ['mouseleave', 'blur']
                }
        }
    }

}

window.Dial = Dial;

function initDial() {
    document.querySelectorAll('[data-dial-init]').forEach(parentEl => {
        const triggerEl = parentEl.querySelector('[data-dial-toggle]')
        const targetEl = document.getElementById(triggerEl.getAttribute('data-dial-toggle'))
        const triggerType = triggerEl.getAttribute('data-dial-trigger')

        new Dial(parentEl, triggerEl, targetEl, {
            triggerType: triggerType ? triggerType : Default.triggerType
        })
    })
}

if (document.readyState !== 'loading') {
    // DOMContentLoaded event were already fired. Perform explicit initialization now
    initDial()
} else {
    // DOMContentLoaded event not yet fired, attach initialization process to it
    document.addEventListener('DOMContentLoaded', initDial)
}

export default Dial