import "./PeopleCard.js"

css(`
    people- {
        font-family: 'Arial';
    }

    people- h1 {
      font-family: 'Bona';
    }

    people- p {
        color: var(--accent);
    }

    people- p b {
        color: var(--darkbrown);
    }
`)

class People extends Shadow {
    people = "";

    constructor() {
        super()
        this.people = global.currentNetwork.data.members;
    }

    render() {
        VStack(() => {
            h1("People")
                .color("rgb(158 136 105)")
                .textAlign("center")
                .marginBottom(0.25, em)
            h3(global.currentNetwork.name)
                .color("var(--quillred)")
                .textAlign("center")
                .margin(0)
                .marginBottom(0.5, em)
                .fontFamily("Bona")

            if (this.people == "") {
                LoadingCircle()
            } else if (this.people.length > 0) {
                for (let i = 0; i < this.people.length; i++) {
                    PeopleCard(this.people[i])
                }
            } else {
                h2("No Members")
                    .color("var(--brown)")
                    .fontWeight("bold")
                    .marginTop(7.5, em)
                    .marginBottom(0.5, em)
                    .textAlign("center")
                p("Invite people to this network!")
                    .textAlign("center")
                    .color("var(--darkbrown)")
            }
        })
        .position("relative")
        .boxSizing("border-box")
        .paddingVertical(1, em)
        .height(100, pct)
        .width(100, pct)
    }

    convertDate(rawDate) {
        const parsed = new Date(rawDate);

        if (isNaN(parsed.getTime())) return rawDate;

        const month = parsed.toLocaleString("en-US", { month: "long", timeZone: "UTC" });
        const day = parsed.getUTCDate();
        const year = parsed.getUTCFullYear();

        const ordinal = (n) => {
            const mod100 = n % 100;
            if (mod100 >= 11 && mod100 <= 13) return `${n}th`;
            switch (n % 10) {
                case 1: return `${n}st`;
                case 2: return `${n}nd`;
                case 3: return `${n}rd`;
                default: return `${n}th`;
            }
        };

        return `${month} ${ordinal(day)}, ${year}`;
    }
}

register(People)