class Dashboard extends Shadow {

    COL = {
        time:    14,
        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")
    }

    spawnModal(msg) {
        let div = document.createElement("div")
        div.classList.add("modal")
        div.innerText = msg
        div.style.left = "50vw"
        div.style.top = "50vh"
        div.style.padding = "5em"
        div.style.borderRadius = "12px"
        div.style.position = "fixed"
        div.style.backgroundColor = "var(--accent)"
        div.style.color = "var(--main)"
        div.style.transform = "translate(-50%, -50%)"
        document.body.appendChild(div)

        let p = document.createElement("p")
        p.innerText = "X"
        p.color = "red"
        p.style.position = "absolute"
        p.style.top = "1em"
        p.style.right = "2em"
        p.style.cursor = "pointer"
        p.onClick((finished) => {
            if(finished) {
                p.parentElement.remove()
            }
        })
        div.appendChild(p)
    }

    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.replace(/:\d{6}(?=am|pm)/i, '')
                        .replace('-', '   ')
                        .replace(/(\d{1,2}:\d{2})(am|pm)/i, (_, time, meridiem) => {
                        const [h, m] = time.split(':');
                        return `${h.padStart(2, '0')}:${m}${meridiem.toLowerCase()}`;
                        }));
                    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)
                        .cursor("pointer")
                        .onHover(function (hovering) {
                            if(hovering) {
                                this.style.outline = "1px solid black"
                            } else {
                                this.style.outline = ""
                            }
                        })
                        .onClick((done) => {
                            if(done) {
                                this.spawnModal(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.replace(/:\d{6}(?=am|pm)/i, '')
                        .replace('-', '   ')
                        .replace(/(\d{1,2}:\d{2})(am|pm)/i, (_, time, meridiem) => {
                        const [h, m] = time.split(':');
                        return `${h.padStart(2, '0')}:${m}${meridiem.toLowerCase()}`;
                        }));                    
                    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)