import { dom, doms, listener, getStyle, screenWidth, onScroll, getQuery } from './utils.js'

(function () {
    let W = getStyle(dom('.w1200'), 'width').slice(0, -2)
    const isBlock = W >= screenWidth

    function reset(item) {
        if (item.children[1]) {
            item.children[1].style.height = 0
            item.children[1].style.borderTop = 'transparent 4px solid'
            item.children[1].style.background = 'transparent'
        }
    }
    function fillColor() {
        const width = `${(document.body.clientWidth - W) / 2}px`
        dom('.sub-nav-left').style.width = width
        dom('.sub-nav-left').style.left = `-${width}`
    }
    function resetSelect() {
        doms('footer li').forEach((it) => {
            it.classList.remove('footer-select-active')
            reset(it)
        })
    }

    const setNodeHegiht = (oldNode, newNode, px) => {
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop > dom(oldNode).clientHeight) dom(newNode).style.height = px
        else dom(newNode).style.height = 0
    }

    doms('footer li').forEach((item) => {
        listener(item, () => {
            const classs = item.classList
            if (classs.value.indexOf('footer-select') != -1) {
                if (classs.value.indexOf('footer-select-active') == -1) {
                    doms('.footer-select').forEach((it) => {
                        it.classList.remove('footer-select-active')
                        reset(it)
                    })

                    classs.add('footer-select-active')

                    if (item.children[1]) {
                        const height = isBlock ? 55 : 33.5
                        item.children[1].style.height = `${height * item.children[1].children.length}px`
                        item.children[1].style.borderTop = '#d53b25 4px solid'
                        item.children[1].style.background = '#FFFFFF'
                    }
                } else {
                    classs.remove('footer-select-active')
                    reset(item)
                }
            } else resetSelect()
        })
    })

    listener(window, () => {
        resetSelect()
        !isBlock && setNodeHegiht('.h5-home_nav', '.h5-home_nav-scroll', '70px')
    }, 'scroll')

    onresize = () => {
        W = getStyle(dom('.w1200'), 'width').slice(0, -2)
        const navScroll = dom('.h5-home_nav-scroll')
        if (W < screenWidth) {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop > dom('.h5-home_nav').clientHeight) navScroll.style.height = '70px'
            else navScroll.style.height = 0
        } else navScroll.style.height = 0
        fillColor()
    }
    
    fillColor()

    const h5navbar = dom('.cd-side-nav')
    doms('.cd-nav-trigger').forEach(item => {
        listener(item, () => {
            item.classList.value.indexOf('nav-is-visible') == -1 ? item.classList.add('nav-is-visible') : item.classList.remove('nav-is-visible')
            
            if (h5navbar.style.height == '0px' || !h5navbar.style.height) {
                h5navbar.style.padding = '16px'
                h5navbar.style.height = '100vh'
                document.body.style.overflow = 'hidden'
            } else {
                document.body.style.overflow = 'auto'
                h5navbar.style.height = 0
                h5navbar.style.padding = 0
            }
        })
    })

    dom('.cd-side-nav .acvie') && listener(dom('.cd-side-nav .acvie'), () => {
        doms('.cd-nav-trigger').forEach(item => item.classList.remove('nav-is-visible'))
        document.body.style.overflow = 'auto'
        h5navbar.style.height = 0
        h5navbar.style.padding = 0
    })

    if (getQuery('index')) {
        onScroll(dom('.tag-view'), 100)
        doms('.tag-view li').forEach((item, index) => {
            doms('.tag-view li').forEach(tag => tag.classList.remove('active'))
            setTimeout(() => getQuery('index') == index && item.classList.add('active'), 100)
        })
    }

    // let body = document.body, allHovers = []
    // const getAllHovers = (node = body) => {
    //     node && doms(':hover', node).forEach(item => {
    //         body = null
    //         if (getAllHovers(item)) allHovers.push(getAllHovers(item))
    //         else allHovers.push(item)
    //     })
    // }
    // !isBlock && setTimeout(() => {
    //     getAllHovers()
    //     console.log(allHovers)
    //     setTimeout(() => allHovers.forEach(item => item.style.pointerEvents = 'none'), 100)
    // }, 2222)
})()