export default { reactive }

export function reactive(target, prism = new Map()) {
    if (Array.isArray(target)) {
        const items = target.map(item => {
            if (item instanceof HTMLElement) {
                return item
            }
            return reactive(item, prism)
        })
        return new Proxy(items, {
            get(target, prop) {
                if (prop === "map") {
                    return function (...args) {
                        return reactive(target[prop](...args).map((item, index) => {
                            if (item === target[index]) {
                                return item
                            }
                            if (item instanceof HTMLElement) {
                                const arr = prism.get(target[index]) ?? []
                                arr.push(item)
                                prism.set(target[index], arr)
                                return item
                            }
                            return reactive(item, prism)
                        }))
                    }
                }
                if (prop === "pop") {
                    console.log("调用了 pop 方法", target)
                    return function (...args) {
                        const item = target[prop](...args)
                        const arr = prism.get(item) ?? []
                        arr.forEach(element => element.remove()) // 移除映射的DOM
                        return item
                    }
                }
                if (prop === "splice") {
                    console.log("调用了 splice 方法", target)
                    return function (...args) {
                        const items = target[prop](...args)
                        items.map(item => {
                            const arr = prism.get(item) ?? []
                            arr.forEach(element => element.remove()) // 移除映射的DOM
                        })
                        return items
                    }
                }
                return target[prop]
            },
            set(target, prop, value) {
                target[prop] = reactive(value, prism)
                return true
            }
        })
    }

    if (typeof target === "object" && target !== null) {
        const proxiedObject = {}
        for (const key in target) {
            proxiedObject[key] = reactive(target[key], prism)
        }

        return new Proxy(proxiedObject, {
            get(target, prop) {
                return target[prop]
            },
            set(target, prop, value) {
                target[prop] = value
                return true
            }
        })
    }

    return target
}