import util from "../util"
import "./Toggle.js"

class Sidebar extends Shadow {
    SIDEBAR_WIDTH

    constructor(width) {
        super()
        this.SIDEBAR_WIDTH = width
        this.showCalendarControls = global.currentApp() === "Calendar";
    }

    CalendarControls() {
        const getButton = (label) => {
            return button(label)
                .fontSize(1.2, em)
                .paddingVertical(0.45, em)
                .paddingHorizontal(0.8, em)
                .border("1px solid var(--divider)")
                .borderRadius(0.6, em)
                .background("var(--accent)")
                .color("var(--headertext)")
                .cursor("pointer")
        }

        return VStack(() => {
            p("Calendar View")
                .fontSize(1, em)
                .fontWeight("bold")
                .color("var(--headertext)")
                .fontFamily("Arial")
                .textAlign("Center")
                .marginBottom(0.5, em)
            HStack(() => {
                getButton("day")
                    .onTap(() => {
                        if ($("calendar-").changeView("day")) {
                            $("home-").closeSidebar();
                        }
                    })
                getButton("week")
                    .onTap(() => {
                        if ($("calendar-").changeView("week")) {
                            $("home-").closeSidebar();
                        }
                    })
                getButton("month")
                    .onTap(() => {
                        if ($("calendar-").changeView("month")) {
                            $("home-").closeSidebar();
                        }
                    })
            })
            .gap(0.5, em)
            .justifyContent("center")
        })
        .width(100, pct)
    }

    SidebarItem(text) {
        return p(text)
            .fontSize(1.2, em)
            .fontWeight("bold")
            .color("var(--headertext)")
            .fontFamily("Arial")
            .marginLeft(1, em)
            .marginTop(2, 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()
                })
                .paddingBottom(1, em)

            if (this.showCalendarControls) {
                this.CalendarControls()
            }

            VStack(() => {
                this.SidebarItem("Logout")

                Toggle("Enable Push Notifications")
                    .marginLeft(1, em)
    
                button("Delete Account")
                    .fontSize(0.9, em)
                    .marginBottom(2, em)
                    .background("var(--darkred)")
                    .paddingVertical(1, em)
                    .border("none")
                    .outline("1px solid var(--divider)")
                    .color("var(--text)")
                    .onTap((done) => this.deleteAccount())
            })
            .marginTop("auto")
            .gap(2, em)
        })
        .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)")
    }

    toggleCalendarControls() {
        this.showCalendarControls = !this.showCalendarControls;
        this.rerender();
    }

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

    async deleteAccount() {
        try {
            const res = await util.authFetch(`${util.HOST}/auth/delete`, {
                method: "DELETE",
                credentials: "include",
                headers: {
                    "X-Client": "mobile",
                    "Content-Type": "application/json",
                    "Accept": "application/json"
                },
                body: JSON.stringify({ memberId: global.profile.id })
            });

            if (!res.ok) return;
            global.onLogout()
        } catch (err) {
            console.error(err)
        }
    }
}

register(Sidebar)