import './Panel.js'
import server from '../../_/code/bridge/serverFunctions.js'

css(`
    announcements- {
        font-family: 'Bona';
    }

    announcements- input::placeholder {
        font-family: 'Bona Nova';
        font-size: 0.9em;
        color: var(--accent);
    }

    input::placeholder {
        font-family: Arial;
    }

    input[type="checkbox"] {
        appearance: none;        /* remove default style */
        -webkit-appearance: none;
        width: 1em;
        height: 1em;
        border: 1px solid var(--accent);
    }

    input[type="checkbox"]:checked {
        background-color: var(--red);
    }
`)

class Announcements extends Shadow {
    announcements;

    constructor() {
        super()
        this.announcements = global.currentNetwork.data.announcements.sort((a, b) => new Date(b.created) - new Date(a.created));
        console.log(this.announcements)
    } 

    render() {
        ZStack(() => {
            VStack(() => {

                Panel(this.announcements)

                input("Message", "70%")
                    .paddingVertical(0.75, em)
                    .boxSizing("border-box")
                    .paddingHorizontal(2, em)
                    .color("var(--text)")
                    .background("var(--searchbackground)")
                    .marginBottom(1, em)
                    .border("0.5px solid var(--accent)")
                    .outline("none")
                    .borderRadius(100, px)
                    .fontFamily("Arial")
                    .fontSize(1, em)
                    .onKeyDown(async function(e) {
                        if (e.key === "Enter") {
                            const result = await server.addAnnouncement(this.value, global.currentNetwork.id, global.profile.id)
                            if (result.data.status === 200) {
                                window.dispatchEvent(new CustomEvent('new-announcement', {
                                    detail: { announcement: result.data.announcement }
                                }));
                            } else {
                                // error
                            }
                            this.value = ""
                        }
                    })
            })
            .gap(1, em)
            .boxSizing("border-box")
            .width(100, pct)
            .height(100, pct)
            .horizontalAlign("center")
            .verticalAlign("end")
            .minHeight(0)
        })
        .backgroundColor("var(--main)")
        .boxSizing("border-box")
        .paddingVertical(1, em)
        .width(100, pct)
        .height(100, pct)
        .flex("1 1 auto")
        .onEvent("new-announcement", this.onNewAnnouncement)
        .onEvent("deleted-announcement", this.onDeletedAnnouncement)
        .onEvent("edited-announcement", this.onEditedAnnouncement)
    }

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

    checkForUpdates(currentAnnouncements, fetchedAnnouncements) {
        if (currentAnnouncements.length !== fetchedAnnouncements.length) return true;

        const currentMap = new Map(currentAnnouncements.map(ann => [ann.id, ann]));

        for (const fetchedAnn of fetchedAnnouncements) {
            const currentAnn = currentMap.get(fetchedAnn.id);

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

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

    async getAnnouncements(networkId) {
        const fetchedAnnouncements = await server.getAnnouncements(networkId)
        if (this.checkForUpdates(this.announcements, fetchedAnnouncements.data)) {
            console.log("found updates")
            this.announcements = fetchedAnnouncements.data.sort((a, b) => new Date(b.created) - new Date(a.created));
            global.currentNetwork.data.announcements = this.announcements
            this.rerender()
        }
    }

    onNewAnnouncement = (e) => {
        let newAnnouncement = e.detail.announcement;
        this.announcements.push(newAnnouncement)
        this.announcements.sort((a, b) => new Date(b.created) - new Date(a.created));
        this.rerender()
    }

    onDeletedAnnouncement = (e) => {
        let deletedId = e.detail.id
        const i = this.announcements.findIndex(ann => ann.id === deletedId)
        if (i !== -1) this.announcements.splice(i, 1);
        this.rerender()
    }

    onEditedAnnouncement = (e) => {
        let editedAnnouncement = e.detail
        const i = this.announcements.findIndex(ann => ann.id === editedPost.id)
        if (i !== -1) { 
            this.announcements.splice(i, 1)
            this.announcements.unshift(editedAnnouncement)
        }
        this.rerender()
    }
}

register(Announcements)