import "../../components/LoadingCircle.js"

class MessagesPanel extends Shadow {
    messages

    constructor(messages) {
        super()
        this.messages = messages
    }

    render() {
        VStack(() => {
            if(this.messages) {
                for(let i=0; i<this.messages.length; i++) {
                    let message = this.messages[i]
                    let fromMe = global.profile.email === message.from.email
                    VStack(() => {
                        HStack(() => {
                            p(message.from.firstName + " " + message.from.lastName)
                                .fontWeight("bold")
                                .marginBottom(0.3, em)

                            p(util.formatTime(message.time))
                                .opacity(0.2)
                                .marginLeft(1, em)
                        })
                        p(message.text)
                    })
                    .paddingVertical(0.5, em)
                    .marginLeft(fromMe ? 70 : 0, pct)
                    .paddingRight(fromMe ? 10 : 0, pct)
                    .marginRight(fromMe ? 0 : 70, pct)
                    .paddingLeft(fromMe ? 5 : 10, pct)
                    .background(fromMe ? "var(--brown)" : "var(--green)")
                }
            } else {
                LoadingCircle()
            }
        })
        .onAppear(async () => {
            requestAnimationFrame(() => {
                this.scrollTop = this.scrollHeight
            });
        })
        .gap(1, em)
        .position("relative")
        .overflow("scroll")
        .height(95, pct)
        .width(100, pct)
        .paddingTop(2, em)
        .paddingBottom(2, em)
        .backgroundColor("var(--darkbrown)")
    }
}

register(MessagesPanel)