class Sidebar extends Shadow {

    toggleSelectedStyles(el) {
        let currentlySelected = $("img[selected]")
        if(currentlySelected) {
            currentlySelected.removeAttribute("selected")
            currentlySelected.style.borderLeft = ""
            currentlySelected.style.paddingLeft = "10px"
        }

        el.setAttribute("selected", "")
        el.style.borderLeft = "1px solid var(--accent)"
        el.style.paddingLeft = "9px"
    }

    render() {
        VStack(() => {
            let selected = window.location.pathname.startsWith("/my")

            img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.5em", "2.5em")
                .marginTop(6, vh)
                .marginBottom(2, vh)
                .attr({selected: selected ? "" : null})
                .paddingRight(0.5, em)
                .paddingLeft(selected ? 9 : 10, px)
                .borderLeft(selected ? "1px solid var(--accent)" : "0")
                .onClick((done, e) => {
                    if(done) {
                        this.toggleSelectedStyles(e.target)
                        window.navigateTo("/my")
                    }
                })

            let networks = global.profile.networks
            for(let i=0; i<networks.length; i++) {
                let selected = window.location.pathname.startsWith("/" + networks[i].abbreviation)

                img(`/db/images/${networks[i].logo}`, "2.25em", "2.25em")
                    .marginTop(3, vh)
                    .attr({selected: selected ? "" : null})
                    .paddingRight(0.5, em)
                    .paddingLeft(selected ? 9 : 10, px)
                    .borderLeft(selected ? "1px solid var(--accent)" : "0")
                    .onHover(function (hovering) {
                        if(hovering) {
                            this.style.opacity = 0.8
                        } else {
                            this.style.opacity = ""
                        }
                    })
                    .onClick((done, e) => {
                        if(done) {
                            this.toggleSelectedStyles(e.target)
                            window.navigateTo(`/${networks[i].abbreviation}`)
                        }
                    })
                    .cursor("default")
            }
        })
        .paddingLeft(1.5, em)
        .paddingRight(1, em)
        .position("fixed")
        .x(0).y(0)
        .height(100, vh)
        .borderRight("1px solid var(--accent)")
        .zIndex(3)
        .onEvent("themechange", () => {
            console.log("why is this needed smg")
            this.rerender()
        })
    }
}

register(Sidebar)