import "../../components/LoadingCircle.js"
import "./EventCard.js"
import server from "../../_/code/bridge/serverFunctions.js"
import "../../components/SearchBar.js"

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

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

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

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

class Events extends Shadow {
    events = [
        {
            id: 1,
            network_id: 2,
            creator_id: 1,
            title: "Austin Chapter Lead",
            description: "This is the descriptio lets try a longer one agaiin just to see what it would look like? mayeb even longer bc that was pretty short now that i see it. maybe 2 sentences if possible or more.",
            location: "1234 location",
            time_start: "2026-01-13 13:41:41.0722",
            created: "2026-01-13 12:00:00.0000",
            updated_at: "2026-01-13 13:41:41.0722"
        }
    ]

    constructor() {
        super()
        // this.events = global.currentNetwork.data.events;
    }

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

            SearchBar()

            if (this.events == "" || this.events == []) {
                LoadingCircle()
            } else if (this.events.length > 0) {
                for (let i = 0; i < this.events.length; i++) {
                    EventCard(this.events[i])
                        .borderTop(i == 0 ? "1px solid var(--divider)" : "")
                }
            } else {
                h2("No Events")
                    .color("var(--brown)")
                    .fontWeight("bold")
                    .marginTop(7.5, em)
                    .marginBottom(0.5, em)
                    .textAlign("center")
            }
        })
        .boxSizing("border-box")
        .paddingVertical(1, em)
        .height(100, pct)
        .width(100, pct)
    }

    async getEvents(networkId) {
        const fetchedEvents = await server.getEvents(networkId)
        if (this.checkForUpdates(this.events, fetchedEvents)) {
            this.events = fetchedEvents
            this.rerender()
        }
    }

    connectedCallback() {
        this.getEvents(global.currentNetwork.id)
    }

    checkForUpdates(currentEvents, fetchedEvents) {
        if (currentEvents.length !== fetchedEvents.length) return true;

        const currentMap = new Map(currentEvents.map(event => [event.id, event]));

        for (const fetchedEvent of fetchedEvents) {
            const currentEvent = currentMap.get(fetchedEvent.id);

            // new event added
            if (!currentEvent) return true;

            // existing event changed
            if (currentEvent.updated_at !== fetchedEvent.updated_at) {
                return true;
            }
        }
        return false;
    }

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