import util from "../util"

class Sidebar extends Shadow {
    SIDEBAR_WIDTH

    constructor(width) {
        super()
        this.SIDEBAR_WIDTH = width
    }

    SidebarItem(text) {
        return p(text)
            .fontSize(1.5, em)
            .fontWeight("bold")
            .color("var(--headertext)")
            .fontFamily("Arial")
            .marginLeft(1, em)
            .onTap(function (done) {
                if (done) {
                    if (this.innerText === "Logout") {
                        global.onLogout()
                        $("home-").closeSidebar();
                        return
                    }
                }
            })
    }

    render() {
        VStack(() => {
            HStack(() => {
                if (global.profile.image_path) {
                    img(`${util.HOST}${global.profile.image_path}`, "10em", "10em")
                        .borderRadius(100, pct)
                }
            })
            .boxSizing("border-box")
            .height(10, em)
            .width(10, em)
            .border("1px solid var(--accent)")
            .borderRadius(100, pct)
            .background("var(--darkaccent)")
            .alignSelf("center")
            .onClick((done) => {
                if(done)
                    this.openProfile()
            })

            h2(global.profile.first_name + " " + global.profile.last_name)
				.color("var(--headertext")
				.textAlign("center")
                .marginVertical(0.25, em)
                .paddingBottom(0.5, em)
                .textAlign("center")
                .alignSelf("center")
                .overflowWrap("break-word")
                .wordBreak("break-word")
                .width(100, pct)
                .borderBottom("2px solid var(--divider)")
                .onClick((done) => {
                    if(done)
                        this.openProfile()
                })
                
            this.SidebarItem("Logout")
        })
        .gap(1, em)
        .paddingTop(15, vh)
        .paddingHorizontal(1, em)
        .height(105, vh)
        .top(-5, vh)
        .minWidth(0)
        .boxSizing("border-box")
        .width(this.SIDEBAR_WIDTH, px)
        .borderLeft("1px solid var(--divider)")
        .color("var(--text)")
        .position("fixed")
        .background("var(--sidebar)")
    }

    openProfile() {
        $("appwindowcontainer-").openProfile()
        $("home-").closeSidebar();
    }
}

register(Sidebar)