class ProfileMenu extends Shadow {

    render() {
        VStack(() => {
            h2("Profile")

            HStack(() => {
                p("Email: ")
                .fontWeight("bold")

                p(window.profile?.email)
            })
            .gap(1, em)
            
            HStack(() => {
                p("Name: ")
                .fontWeight("bold")

                p(window.profile?.name)
            })
            .gap(1, em)

            p("X")
                .onClick(() => {
                    this.style.display = "none"
                })
                .xRight(2, em).y(1, em)
        })
        .paddingLeft(1, em)
        .color("var(--accent)")
        .position("fixed")
        .border("1px solid var(--accent)")
        .x(50, vw).y(47, vh)
        .width(70, vw)
        .height(70, vh)
        .backgroundColor("black")
        .center()
        .display("none")
        .onAppear(async () => {
            if(!window.profile) {
                window.profile = await this.fetchProfile()
                this.rerender()
            }
        })
    }

    async fetchProfile() {
        try {
            const res = await fetch("/profile", {
                method: "GET",
                credentials: "include",
                headers: {
                    "Content-Type": "application/json"
                }
            });

            if (!res.ok) throw new Error("Failed to fetch profile");

            const profile = await res.json();
            console.log(profile);
            return profile
        } catch (err) {
            console.error(err);
        }
    }
}

register(ProfileMenu, "profile-menu")