import "../components/Sidebar.js"
import "../components/AppMenu.js"
import "../components/AppWindowContainer.js"

class Home extends Shadow {

    dragStartX = null
    sidebarOpen = false

    render() {
        ZStack(() => {

            // img("/_/icons/hamburger.svg", "3em")
            //     .position("absolute")
            //     .zIndex(2)
            //     .left(1.5, em)
            //     .top(1, em)
            //     .onTouch(function (start) {
            //         if(start) {
            //             this.style.scale = "0.8"
            //         } else if(start === false) {
            //             this.style.scale = ""
            //             $("sidebar-").toggle()
            //         }
            //     })

			Sidebar()

            VStack(() => {
                AppWindowContainer()

                AppMenu()
            })
            .height(100, pct)
            .minHeight(0)
        })
        .backgroundColor("var(--main)")
        .overflowX("hidden")
        .height(window.visualViewport.height - 20, px)
        .position("fixed")
        .top(20, px)
        .borderLeft("1px solid var(--accent)")
        .onTouch((start, e) => {
            console.log(e)
            if(this.sidebarOpen) {
                this.sidebarOpenDrag(start, e)
            } else {
                this.sidebarClosedDrag(start, e)
            }
        })
    }

    sidebarOpenDrag(start, e) {
        console.log("sidebaropendrag")
        if(start) {
            let fiveSixths = (window.outerWidth * 5) / 6
            let amount = e.targetTouches[0].clientX
            if(amount < fiveSixths) {
                this.dragStartX = e.touches[0].clientX
                document.addEventListener("touchmove", this.moveSidebar)
            }
        } else {
            if(!this.dragStartX) return;

            let oneThird = window.outerWidth / 3
            let endX = e.changedTouches[0].clientX
            if(endX < oneThird) {
                this.style.transition = "left .2s"
                this.style.left = `0px`
                this.sidebarOpen = false
            } else {
                this.style.transition = "left .2s"
                this.sidebarOpen = true
                this.style.left = `${oneThird * 2}px`
            }

            this.style.transition = ""
            this.dragStartX = null
            document.removeEventListener("touchmove", this.moveSidebar)
        }
    }

    sidebarClosedDrag(start, e) {
        console.log(e)
        if(start) {
            let oneTenth = window.outerWidth / 10
            let amount = e.targetTouches[0].clientX
            if(amount < oneTenth) {
                this.dragStartX = e.touches[0].clientX
                document.addEventListener("touchmove", this.moveSidebar)
            }
        } else {
            if(!this.dragStartX) return;

            let oneThird = window.outerWidth / 3
            let endX = e.changedTouches[0].clientX
            if(endX > oneThird) {
                this.style.transition = "left .2s"
                this.style.left = `${oneThird * 2}px`
                this.sidebarOpen = true
            } else {
                this.sidebarOpen = false
                this.style.left = "0px"
            }

            this.style.transition = ""
            this.dragStartX = null
            document.removeEventListener("touchmove", this.moveSidebar)
        }
    }

    moveSidebar = (e) => {
        let twoThirds = window.outerWidth * .66
        let amount = e.targetTouches[0].clientX
        if(e.targetTouches[0] && amount < twoThirds) {
            console.log("dragtivated: ", amount, twoThirds)
            this.style.left = `${amount}px`
        }
    }
}

register(Home)