class MessagesPanel extends Shadow {
    forums = [
        "HY"
    ]
    messages = []

    render() {
        VStack(() => {
            if(this.messages.length > 0) {
                for(let i=0; i<this.messages.length; i++) {
                    let message = this.messages[i]
                    VStack(() => {
                        HStack(() => {
                            p(message.sentBy)
                                .fontWeight("bold")
                                .marginBottom(0.3, em)

                            p(this.formatTime(message.time))
                                .opacity(0.2)
                                .marginLeft(1, em)
                        })
                        p(message.text)
                    })
                }
            } else {
                div()
                    .borderRadius(100, pct)
                    .width(2, em).height(2, em)
                    .x(45, pct).y(50, pct)
                    .center()
                    .backgroundColor("var(--accent")
                    .transition("transform 1.75s ease-in-out")
                    .onAppear(function () {
                        let growing = true;

                        setInterval(() => {
                            if (growing) {
                                this.style.transform = "scale(1.5)";
                            } else {
                                this.style.transform = "scale(0.7)";
                            }
                            growing = !growing;
                        }, 750);
                    });
            }
        })
        .gap(1, em)
        .position("relative")
        .overflow("scroll")
        .height(95, pct)
        .width(93, pct)
        .paddingTop(2, em)
        .paddingBottom(2, em)
        .paddingHorizontal(2, em)
        .backgroundColor("var(--darkbrown)")
        .onAppear(async () => {
            console.log("appear")
            let res = await Socket.send({app: "FORUM", operation: "GET", msg: {forum: "HY", number: 100}})
            if(!res) console.error("failed to get messages")
            if(res.msg.length > 0 && this.messages.length === 0) {
                console.log("rerendering", res.msg)
                this.messages = res.msg
                this.rerender()
            }
            window.addEventListener("new-message", (e) => {
                this.messages = e.detail
                this.rerender()
            })
        })
        .scrollTop = this.scrollHeight
    }

    formatTime(str) {
        // Extract the time part with am/pm
        const match = str.match(/-(\d+:\d+):\d+.*(am|pm)/i);
        if (!match) return null;

        const [_, hourMin, ampm] = match;
        return hourMin + ampm.toLowerCase();
    }
}

register(MessagesPanel)