class Dashboard extends Shadow {

    COL = {
        time:    17,
        fname:   6,
        lname:   6,
        email:   20,
        phone:   12,
        message: 24,
        county:  10
    };

    cell(type, value) {
        return p(value)
            .width(this.COL[type], pct)
            .whiteSpace("nowrap")
            .overflowX("auto")
            .overflowY("hidden");
    }

    render() {
        VStack(() => {

            if(window.location.pathname.startsWith("/my")) {
                h1(global.profile.name);
                return
            }
            else if(!window.location.pathname.includes("comalyr")) {
                return
            }
            
            h1("Website Inquiries");

            p("Contact Us")
                .fontWeight("bold")
                .marginTop(4, em)
                .marginBottom(1, em)
                .fontStyle("italic")

            HStack(() => {
                p("Time").width(this.COL.time, pct).fontWeight("bold").whiteSpace("nowrap");
                p("First").width(this.COL.fname, pct).fontWeight("bold").whiteSpace("nowrap");
                p("Last").width(this.COL.lname, pct).fontWeight("bold").whiteSpace("nowrap");
                p("Email").width(this.COL.email, pct).fontWeight("bold").whiteSpace("nowrap");
                p("Phone").width(this.COL.phone, pct).fontWeight("bold").whiteSpace("nowrap");
                p("Message").width(this.COL.message, pct).fontWeight("bold").whiteSpace("nowrap");
                p("County").width(this.COL.county, pct).fontWeight("bold").whiteSpace("nowrap");
            })
            .width(95, pct)
            .maxWidth(95, pct)
            .gap(8);

            global.currentNetwork.data.contact.forEach((entry) => {
                HStack(() => {
                    this.cell("time", entry.time);
                    this.cell("fname", entry.fname);
                    this.cell("lname", entry.lname);
                    this.cell("email", entry.email);
                    this.cell("phone", entry.phone);
                    this.cell("message", entry.message);
                    this.cell("county", entry.county ?? "Not Specified");
                })
                .width(95, pct)
                .maxWidth(95, pct)
                .gap(8);
            });

            p("Join")
                .fontWeight("bold")
                .marginTop(4, em)
                .marginBottom(1, em)
                .fontStyle("italic")

            HStack(() => {
                p("Time").width(this.COL.time, pct).fontWeight("bold").whiteSpace("nowrap");
                p("First").width(this.COL.fname, pct).fontWeight("bold").whiteSpace("nowrap");
                p("Last").width(this.COL.lname, pct).fontWeight("bold").whiteSpace("nowrap");
                p("Email").width(this.COL.email, pct).fontWeight("bold").whiteSpace("nowrap");
                p("Phone").width(this.COL.phone, pct).fontWeight("bold").whiteSpace("nowrap");
                p("County").width(this.COL.county, pct).fontWeight("bold").whiteSpace("nowrap");
            })
            .width(95, pct)
            .maxWidth(95, pct)
            .gap(8);

            global.currentNetwork.data.join.forEach((entry) => {
                HStack(() => {
                    this.cell("time", entry.time);
                    this.cell("fname", entry.fname);
                    this.cell("lname", entry.lname);
                    this.cell("email", entry.email);
                    this.cell("phone", entry.phone);
                    this.cell("county", entry.county ?? "Not Specified");
                })
                .width(95, pct)
                .maxWidth(95, pct)
                .gap(8);
            });
        })
        .paddingTop(4, pct)
        .paddingLeft(5, pct)
        .width(100, pct)
        .height(100, pct);
    }
}

register(Dashboard)