import "./components/AppWindow.js"
import "./components/AppMenu.js"
import "./components/ProfileButton.js"
import "./components/InputBox.js"
import "./components/Sidebar.js"
    
class Home extends Shadow {
    render() {
        ZStack(() => {

            Sidebar()
            
            AppMenu()
            
            AppWindow()

            HStack(() => {
                let selected = document.documentElement.className
                select(() => {
                    option("")
                    option("Light").attr({value: "light"})
                    option("Dark").attr({value: "dark"})
                    option("Red").attr({value: "red"})
                    option("Parchment").attr({value: "parchment"})

                    $(`option[value=${selected}]`).selected = "true"
                })
                    .outline("none")
                    .background("transparent")
                    .height(2, em)
                    .color("var(--accent)")
                    .border("1px solid var(--accent)")
                    .attr({value: "dark"})
                    .onChange((e) => {
                        document.documentElement.className = e.target.value
                        localStorage.setItem("theme", e.target.value);
                        const event = new CustomEvent('themechange', {
                            detail: {}
                        });
                        window.dispatchEvent(event)
                    })
                    .onHover(function (hovering) {
                        if(hovering) {
                            this.style.background = "var(--green)"
                        } else {
                            this.style.background = "transparent"
                        }
                    })

                a("/signout", "Sign Out")
                    .paddingVertical(0)
                    .paddingHorizontal(0.5, em)
                    .height(2, em)
                    .lineHeight(2, em)
                    .fontSize(0.8, em)
                    .background("transparent")
                    .border("1px solid var(--accent")
                    .color("var(--accent)")
                    .onHover(function (hovering) {
                        if(hovering) {
                            this.style.background = "var(--green)"
                        } else {
                            this.style.background = ""
                        }
                    })
            })
            .gap(1, em)
            .xRight(2, em).y(2.3, em)
            .position("fixed")
            .verticalAlign("center")
        })
    }
}

register(Home)