import util from "../../util"

class PeopleCard extends Shadow {
    constructor(person) {
        super()
        this.person = person
        this.imgSrc = null
    }

    render() {
        HStack(() => {
            HStack(() => { 
                if (this.imgSrc && !this.imgSrc.includes("null")) {
                    img(this.imgSrc, "3em", "3em")
                        .borderRadius(100, pct)
                }
            })
            .boxSizing("border-box")
            .height(3, em)
            .width(3, em)
            .border("1px solid var(--accent)")
            .borderRadius(100, pct)
            .background("var(--darkaccent)")

            VStack(() => {
                p(this.person.first_name + " " + this.person.last_name)
                    .color("var(--headertext)")
                    .marginVertical(0, em)
            })
            .verticalAlign("center")
            .horizontalAlign("left")
        })
        .width(100, pct)
        .boxSizing("border-box")
        .paddingHorizontal(1.75, em)
        .gap(1, em)
    }

    connectedCallback() {
        if(this.person.image_path) {
            this.imgSrc = `${util.HOST}${this.person.image_path}`
        }
    }

    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(PeopleCard)