import util from "../../util"
import server from "../../_/code/bridge/serverFunctions.js"

css(`
    eventcard- p {
        font-size: 0.85em;
        color: var(--darktext);
    }
`)

class EventCard extends Shadow {
    constructor(event) {
        super()
        this.event = event
    }

    render() {
        VStack(() => {
            HStack(() => {
                h3(this.event.title)
                    .color("var(--text)")
                    .fontSize(1.3, em)
                    .fontWeight("normal")
                    .margin(0, em)
            
                    // Delete button
                // if (this.event.creator_id === global.profile.id) {
                //     img(util.cssVariable("trash-src"), "1.5em")
                //         .marginRight(0.5, em)
                //         .onTap(() => {
                //             this.deleteEvent(this.event)
                //         })
                // }
            })
            .justifyContent("space-between")
            .verticalAlign("center")

            p(this.event.location)
            .marginTop(0.75, em)
            p(this.convertDate(this.event.time_start))
            .marginTop(0.25, em)
            p(this.event.description)
            .marginTop(0.75, em)
        })
        .paddingVertical(1.5, em)
        .paddingHorizontal(3.5, em)
        .marginHorizontal(1, em)
        .borderRadius(10, px)
        .background("var(--darkaccent)")
        .border("1px solid var(--accent)")
        .boxSizing("border-box")
    }

    async deleteEvent(event) {
        const result = await server.deleteEvent(event.id, event.network_id, global.profile.id)
        if (result.data === null) {
            console.log("Failed to delete event")
        }
    }

    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 hours24 = parsed.getUTCHours();
        const minutes = parsed.getUTCMinutes();

        const hours12 = hours24 % 12 || 12;
        const ampm = hours24 >= 12 ? "PM" : "AM";
        const paddedMinutes = String(minutes).padStart(2, "0");

        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} at ${hours12}:${paddedMinutes} ${ampm}`;
    }
}

register(EventCard)