import { createElement } from '../main.js'

export function Dialog(options) {
    const element = createElement({
        tabIndex: 0,
        style: {
            position: 'fixed',
            top: 0,
            left: 0,
            zIndex: 1000,
            width: '100%',
            height: '100%',
            backdropFilter: 'blur(5px)',
            duration: '0.5s',
            transition: 'all 0.5s'
        },
        onclick: async event => {
            if (event.target !== event.currentTarget) return
            await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
            await event.target.remove()
        },
        onkeydown: async event => {
            if (event.key !== 'Escape') return
            await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
            await event.target.remove()
        },
        children: [
            createElement({
                ...options,
                style: {
                    position: 'fixed',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                    backgroundColor: '#fff',
                    borderRadius: '150px',
                    boxShadow: '0 0 1em #ccc',
                    overflow: 'hidden',
                    display: 'flex',
                    justifyContent: 'center',
                    ...options.style,
                }
            })
        ]
    })
    const observer = new MutationObserver(mutationsList => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                element.focus()
                element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 }).finished
                return observer.disconnect()
            }
        }
    })
    observer.observe(document.body, { childList: true, subtree: true })
    return element
}