/*
    DOM 操作 API
*/

// 根据 html 代码片段创建 dom 对象
function createElemByHTML(html) {
    let div
    div = document.createElement('div')
    div.innerHTML = html
    return div.children
}

// 是否是 DOM List
function isDOMList(selector) {
    if (!selector) {
        return false
    }
    if (selector instanceof HTMLCollection || selector instanceof NodeList) {
        return true
    }
    return false
}

// 封装 document.querySelectorAll
function querySelectorAll(selector) {
    const result = document.querySelectorAll(selector)
    if (isDOMList(result)) {
        return result
    } else {
        return [result]
    }
}

// 记录所有的事件绑定
const eventList = []

// 创建构造函数
function DomElement(selector) {
    if (!selector) {
        return
    }

    // selector 本来就是 DomElement 对象，直接返回
    if (selector instanceof DomElement) {
        return selector
    }

    this.selector = selector
    const nodeType = selector.nodeType

    // 根据 selector 得出的结果（如 DOM，DOM List）
    let selectorResult = []
    if (nodeType === 9) {
        // document 节点
        selectorResult = [selector]
    } else if (nodeType === 1) {
        // 单个 DOM 节点
        selectorResult = [selector]
    } else if (isDOMList(selector) || selector instanceof Array) {
        // DOM List 或者数组
        selectorResult = selector
    } else if (typeof selector === 'string') {
        // 字符串
        selector = selector.replace('/\n/mg', '').trim()
        if (selector.indexOf('<') === 0) {
            // 如 <div>
            selectorResult = createElemByHTML(selector)
        } else {
            // 如 #id .class
            selectorResult = querySelectorAll(selector)
        }
    }

    const length = selectorResult.length
    if (!length) {
        // 空数组
        return this
    }

    // 加入 DOM 节点
    let i
    for (i = 0; i < length; i++) {
        this[i] = selectorResult[i]
    }
    this.length = length
}

// 修改原型
DomElement.prototype = {
    constructor: DomElement,

    // 类数组，forEach
    forEach: function (fn) {
        let i
        for (i = 0; i < this.length; i++) {
            const elem = this[i]
            const result = fn.call(elem, elem, i)
            if (result === false) {
                break
            }
        }
        return this
    },

    // clone
    clone: function (deep) {
        const cloneList = []
        this.forEach(elem => {
            cloneList.push(elem.cloneNode(!!deep))
        })
        return $(cloneList)
    },

    // 获取第几个元素
    get: function (index) {
        const length = this.length
        if (index >= length) {
            index = index % length
        }
        return $(this[index])
    },

    // 第一个
    first: function () {
        return this.get(0)
    },

    // 最后一个
    last: function () {
        const length = this.length
        return this.get(length - 1)
    },

    // 绑定事件
    on: function (type, selector, fn) {
        // selector 不为空，证明绑定事件要加代理
        if (!fn) {
            fn = selector
            selector = null
        }

        // type 是否有多个
        let types = []
        types = type.split(/\s+/)

        return this.forEach(elem => {
            types.forEach(type => {
                if (!type) {
                    return
                }

                // 记录下，方便后面解绑
                eventList.push({
                    elem: elem,
                    type: type,
                    fn: fn
                })

                if (!selector) {
                    // 无代理
                    elem.addEventListener(type, fn)
                    return
                }

                // 有代理
                elem.addEventListener(type, e => {
                    const target = e.target
                    if (target.matches(selector)) {
                        fn.call(target, e)
                    }
                })
            })
        })
    },

    // 取消事件绑定
    off: function (type, fn) {
        return this.forEach(elem => {
            elem.removeEventListener(type, fn)
        })
    },

    // 获取/设置 属性
    attr: function (key, val) {
        if (val == null) {
            // 获取值
            return this[0].getAttribute(key)
        } else {
            // 设置值
            return this.forEach(elem => {
                elem.setAttribute(key, val)
            })
        }
    },

    // 添加 class
    addClass: function(className) {
        if (!className) {
            return this
        }
        return this.forEach(elem => {
            let arr
            if (elem.className) {
                // 解析当前 className 转换为数组
                arr = elem.className.split(/\s/)
                arr = arr.filter(item => {
                    return !!item.trim()
                })
                // 添加 class
                if (arr.indexOf(className) < 0) {
                    arr.push(className)
                }
                // 修改 elem.class
                elem.className = arr.join(' ')
            } else {
                elem.className = className
            }
        })
    },

    // 删除 class
    removeClass: function (className) {
        if (!className) {
            return this
        }
        return this.forEach(elem => {
            let arr
            if (elem.className) {
                // 解析当前 className 转换为数组
                arr = elem.className.split(/\s/)
                arr = arr.filter(item => {
                    item = item.trim()
                    // 删除 class
                    if (!item || item === className) {
                        return false
                    }
                    return true
                })
                // 修改 elem.class
                elem.className = arr.join(' ')
            }
        })
    },

    // 修改 css
    css: function (key, val) {
        const currentStyle = `${key}:${val};`
        return this.forEach(elem => {
            const style = (elem.getAttribute('style') || '').trim()
            let styleArr, resultArr = []
            if (style) {
                // 将 style 按照 ; 拆分为数组
                styleArr = style.split(';')
                styleArr.forEach(item => {
                    // 对每项样式，按照 : 拆分为 key 和 value
                    let arr = item.split(':').map(i => {
                        return i.trim()
                    })
                    if (arr.length === 2) {
                        resultArr.push(arr[0] + ':' + arr[1])
                    }
                })
                // 替换或者新增
                resultArr = resultArr.map(item => {
                    if (item.indexOf(key) === 0) {
                        return currentStyle
                    } else {
                        return item
                    }
                })
                if (resultArr.indexOf(currentStyle) < 0) {
                    resultArr.push(currentStyle)
                }
                // 结果
                elem.setAttribute('style', resultArr.join('; '))
            } else {
                // style 无值
                elem.setAttribute('style', currentStyle)
            }
        })
    },

    // 显示
    show: function () {
        return this.css('display', 'block')
    },

    // 隐藏
    hide: function () {
        return this.css('display', 'none')
    },

    // 获取子节点
    children: function () {
        const elem = this[0]
        if (!elem) {
            return null
        }

        return $(elem.children)
    },

    // 获取子节点（包括文本节点）
    childNodes: function () {
        const elem = this[0]
        if (!elem) {
            return null
        }

        return $(elem.childNodes)
    },

    // 增加子节点
    append: function($children) {
        return this.forEach(elem => {
            $children.forEach(child => {
                elem.appendChild(child)
            })
        })
    },

    // 移除当前节点
    remove: function () {
        return this.forEach(elem => {
            if (elem.remove) {
                elem.remove()
            } else {
                const parent = elem.parentElement
                parent && parent.removeChild(elem)
            }
        })
    },

    // 是否包含某个子节点
    isContain: function ($child) {
        const elem = this[0]
        const child = $child[0]
        return elem.contains(child)
    },

    // 尺寸数据
    getSizeData: function () {
        const elem = this[0]
        return elem.getBoundingClientRect()  // 可得到 bottom height left right top width 的数据
    },

    // 封装 nodeName
    getNodeName: function () {
        const elem = this[0]
        return elem.nodeName
    },

    // 从当前元素查找
    find: function (selector) {
        const elem = this[0]
        return $(elem.querySelectorAll(selector))
    },

    // 获取当前元素的 text
    text: function (val) {
        if (!val) {
            // 获取 text
            const elem = this[0]
            return elem.innerHTML.replace(/<.*?>/g, () => '')
        } else {
            // 设置 text
            return this.forEach(elem => {
                elem.innerHTML = val
            })
        }
    },

    // 获取 html
    html: function (value) {
        const elem = this[0]
        if (value == null) {
            return elem.innerHTML
        } else {
            elem.innerHTML = value
            return this
        }
    },

    // 获取 value
    val: function () {
        const elem = this[0]
        return elem.value.trim()
    },

    // focus
    focus: function () {
        return this.forEach(elem => {
            elem.focus()
        })
    },

    // parent
    parent: function () {
        const elem = this[0]
        return $(elem.parentElement)
    },

    // parentUntil 找到符合 selector 的父节点
    parentUntil: function (selector, _currentElem) {
        const results = document.querySelectorAll(selector)
        const length = results.length
        if (!length) {
            // 传入的 selector 无效
            return null
        }

        const elem = _currentElem || this[0]
        if (elem.nodeName === 'BODY') {
            return null
        }

        const parent = elem.parentElement
        let i
        for (i = 0; i < length; i++) {
            if (parent === results[i]) {
                // 找到，并返回
                return $(parent)
            }
        }

        // 继续查找
        return this.parentUntil(selector, parent)
    },

    // 判断两个 elem 是否相等
    equal: function ($elem) {
        if ($elem.nodeType === 1) {
            return this[0] === $elem
        } else {
            return this[0] === $elem[0]
        }
    },

    // 将该元素插入到某个元素前面
    insertBefore: function (selector) {
        const $referenceNode = $(selector)
        const referenceNode = $referenceNode[0]
        if (!referenceNode) {
            return this
        }
        return this.forEach(elem => {
            const parent = referenceNode.parentNode
            parent.insertBefore(elem, referenceNode)
        })
    },

    // 将该元素插入到某个元素后面
    insertAfter: function (selector) {
        const $referenceNode = $(selector)
        const referenceNode = $referenceNode[0]
        if (!referenceNode) {
            return this
        }
        return this.forEach(elem => {
            const parent = referenceNode.parentNode
            if (parent.lastChild === referenceNode) {
                // 最后一个元素
                parent.appendChild(elem)
            } else {
                // 不是最后一个元素
                parent.insertBefore(elem, referenceNode.nextSibling)
            }
        })
    }
}

// new 一个对象
function $(selector) {
    return new DomElement(selector)
}

// 解绑所有事件，用于销毁编辑器
$.offAll = function () {
    eventList.forEach(item => {
        const elem = item.elem
        const type = item.type
        const fn = item.fn
        // 解绑
        elem.removeEventListener(type, fn)
    })
}

export default $