export const sidebar = document.getElementById('sidebar')!
export const backdrop = document.getElementById('sidebar-backdrop')!
export const toggle = document.getElementById('sidebar-toggle')!
export const close = document.getElementById('sidebar-close')!

export const openSidebar = () => {
    sidebar.classList.add('open')
    backdrop.classList.add('open')
    toggle.setAttribute('aria-expanded', 'true')
    document.body.style.overflow = 'hidden'
}
export const closeSidebar = () => {
    sidebar.classList.remove('open')
    backdrop.classList.remove('open')
    toggle.setAttribute('aria-expanded', 'false')
    document.body.style.overflow = ''
}

toggle.addEventListener('click', () => sidebar.classList.contains('open') ? closeSidebar() : openSidebar())
close.addEventListener('click', closeSidebar)
backdrop.addEventListener('click', closeSidebar)
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeSidebar() })
window.addEventListener('resize', () => { if (window.innerWidth > 680) closeSidebar() })

document.querySelectorAll('s-item').forEach(item => {
    item.addEventListener('click', function () {
        document.querySelectorAll('s-item').forEach(i => i.removeAttribute('active'))
        //@ts-expect-error
        this.setAttribute('active', '')
        if (window.innerWidth <= 680) closeSidebar()
    })
})

export const showModal = () => {
    document.getElementById('modal-backdrop')!.classList.add('modal-open')
    document.getElementById('modal-el')!.focus()
}
export const hideModal = () => { document.getElementById('modal-backdrop')!.classList.remove('modal-open') }
export const setModalHTML = (html: string) => {
    document.getElementById('modal-el')!.innerHTML = html
    showModal()
}
export const getModal = () => document.getElementById('modal-el')

// document.getElementById('modal-backdrop')!.addEventListener('click', e => { if (e.target === document.getElementById('modal-backdrop')) hideModal() })

export const createPillHTML = (label: string, html: string, fullWidth = false) =>
    `<pill${fullWidth ? ' full' : ''}><p>${label}</p><elm>${html}</elm></pill>`

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('input[type="range"]').forEach(slider => {
        const valEl = slider.parentElement?.querySelector('val')
        if (valEl) {
            valEl.textContent = (slider as any).value
            slider.addEventListener('input', () => valEl.textContent = (slider as any).value)
        }
    })
})