export function createElement({ innerText, textContent, onclick, onchange, ondrop, ondragover, ondragleave, onkeydown, onmouseenter, onmouseleave, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
    const element = document.createElement(tagName)
    for (const key in attributes) element.setAttribute(key, attributes[key])
    if (style) Object.assign(element.style, style)
    if (classList.length) element.classList.add(...classList)
    if (textContent) element.textContent = textContent
    if (innerText) element.innerText = innerText
    if (readOnly) element.readOnly = readOnly
    if (onkeydown) element.onkeydown = onkeydown
    if (onchange) element.onchange = onchange
    if (onclick) element.onclick = onclick
    if (dataset) Object.assign(element.dataset, dataset)
    if (children) children.forEach(child => element.appendChild(child))
    if (onmouseenter) element.onmouseenter = onmouseenter
    if (onmouseleave) element.onmouseleave = onmouseleave
    if (ondrop) element.ondrop = ondrop
    if (ondragover) element.ondragover = ondragover
    if (ondragleave) element.ondragleave = ondragleave
    return element
}

export function List(options) {
    return createElement(options, 'ul')
}

export function ListItem(options) {
    return createElement(options, 'li')
}

export function Span(options) {
    return createElement(options, 'span')
}

export function Button(options) {
    return createElement(options, 'button')
}

export function Input(options) {
    return createElement(options, 'input')
}

export function Avatar(options) {
    const element = createElement(options, 'img')
    element.onerror = () => element.src = '/favicon.ico'
    return element
}

export function UploadMusic(options) {
    const drop = createElement({
        textContent: '点击或拖拽音乐到此处共享您的音乐',
        style: {
            width: '100%',
            color: '#999',
            lineHeight: '5rem',
            textAlign: 'center',
            position: 'absolute',
            top: 0,
            display: 'none'
        }
    })
    return createElement({
        ...options,
        style: {
            width: '100%',
            height: '10rem',
            backdropFilter: 'blur(5px)',
            backgroundColor: '#fcfcfc',
            borderRadius: '1em',
            border: '1px solid #f1f1f1',
            position: 'relative',
            userSelect: 'none',
            cursor: 'pointer',
            ...options.style
        },
        onclick: event => {
            // 临时创建一个input触发input的点击事件
            const input = Input({
                type: 'file',
                multiple: true,
                accept: 'audio/*',
                style: {
                    display: 'none',
                },
                onchange: event => {
                    const files = Array.from(event.target.files)
                    if (files.length === 0) return
                    options.onchange(files)
                }
            })
            input.click()
        },
        onmouseenter: event => {
            drop.style.display = 'block'
        },
        onmouseleave: event => {
            drop.style.display = 'none'
        },
        // 如果拖拽到了子元素上, 也要触发父元素的事件
        ondragover: event => {
            console.log('dragover')
            event.preventDefault()
            event.stopPropagation()
            event.dataTransfer.dropEffect = 'copy'
            drop.style.display = 'block'
        },
        ondrop: event => {
            console.log('drop')
            event.preventDefault()
            event.stopPropagation()
            const files = Array.from(event.dataTransfer.files)
            if (files.length === 0) return console.log('没有文件')
            console.log('files', files)
            options.onchange(files)
        },
        ondragleave: event => {
            event.preventDefault()
            event.stopPropagation()
            drop.style.display = 'none'
        },
        children: [
            // 绘制一个云朵上传图标(别放弃...还有我呢!)
            createElement({
                style: {
                    width: '82px',
                    height: '30px',
                    background: '#e7f4fd',
                    background: '-webkit-linear-gradient(top,#e7f4fd 5%,#ceedfd 100%)',
                    borderRadius: '25px',
                    position: 'relative',
                    margin: '33px auto 5px'
                },
                children: [
                    createElement({
                        style: {
                            width: '45px',
                            height: '45px',
                            top: '-22px',
                            right: '12px',
                            borderRadius: '50px',
                            borderRadius: '25px',
                            background: '#e7f4fd',
                            position: 'absolute',
                            zIndex: '-1'
                        }
                    }),
                    createElement({
                        style: {
                            width: '25px',
                            height: '25px',
                            top: '-12px',
                            left: '12px',
                            borderRadius: '25px',
                            background: '#e7f4fd',
                            position: 'absolute',
                            zIndex: '-1'
                        }
                    }),
                    Span({
                        width: '87px',
                        position: 'absolute',
                        bottom: '-2px',
                        background: '#000',
                        zIndex: '-1',
                        boxShadow: '0 0 6px 2px rgba(0,0,0,0.1)',
                        borderRadius: '50%'
                    })
                ]
            }),
            drop
            //createElement({
            //    style: {
            //        position: 'absolute',
            //        top: '50%',
            //        left: '50%',
            //        transform: 'translate(-50%, -50%)',
            //        width: '4rem',
            //        height: '4rem',
            //        backgroundColor: '#ff1414',
            //        borderRadius: '50%',
            //        opacity: 0.2,
            //        boxShadow: '-35px 10px 0 -10px, 33px 15px 0 -15px, 0 0 0 6px #fff, -35px 10px 0 -5px #fff, 33px 15px 0 -10px #fff;',
            //        background: 'currentColor',
            //    },
            //    children: [
            //        createElement({
            //            style: {
            //                position: 'absolute',
            //                top: '50%',
            //                left: '50%',
            //                transform: 'translate(-50%, -50%)',
            //                width: '2rem',
            //                height: '2rem',
            //                backgroundColor: '#fff',
            //                borderRadius: '50%',
            //                boxShadow: '0 0 0 6px #fff, -35px 10px 0 -5px #fff, 33px 15px 0 -10px #fff;',
            //            }
            //        })
            //    ],
            //})
        ]
    })
    //Input({
    //    ...options,
    //    type: 'file',
    //    multiple: true,
    //    accept: 'audio/*',
    //    style: {
    //        display: 'none',
    //        ...options.style
    //    }
    //})
}

// 弹出窗口, 高斯模糊背景, 进入离开动画过渡
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
}

// 深度代理, 用于监听数据的变化
export function useProxy(data, callback, path = []) {
    if (Array.isArray(data)) {
        const array = class extends Array {
            constructor(args) {
                super(args)
            }
            push(args) {
                super.push(args)
                console.log('push', args)
                this.__notify()
            }
            pop(...args) {
                const result = super.pop(...args)
                console.log('pop')
                this.__notify()
                return result
            }
            shift(...args) {
                const result = super.shift(...args)
                this.__notify()
                return result
            }
            unshift(...args) {
                super.unshift(...args)
                this.__notify()
            }
            splice(...args) {
                super.splice(...args)
                this.__notify()
            }
            deleteProperty(...args) {
                console.log('deleteProperty', ...args)
                super.deleteProperty(...args)
                this.__notify()
            }
            __notify() {
                if (callback) callback()
            }
        }
        //console.log('为数组每项递归创建代理')
        data.forEach((item, index) => {
            data[index] = useProxy(item, callback, [...path, index])
        })
        return new array(...data)
    }
    if (typeof data === 'object' && data !== null) {
        //console.log('为对象属性递归创建代理')
        Object.keys(data).forEach(key => {
            if (typeof data[key] === 'object' && data[key] !== null) {
                data[key] = useProxy(data[key], callback, [...path, key])
            }
        })
        return new Proxy(data, {
            deleteProperty(target, key) {
                console.log('deleteProperty', key)
                return delete target[key]
            }
        })
    }
    console.log('为其它类型直接返回')
    return data
}