class MessagesSidebar extends Shadow {
    conversations = []
    selectedConvoID
    onSelect

    constructor(conversations, selectedConvoID, onSelect) {
        super()
        this.conversations = conversations
        this.selectedConvoID = selectedConvoID
        this.onSelect = onSelect
    }

    render() {
         VStack(() => {
            this.conversations.forEach((convo, i) => {

                VStack(() => {
                    HStack(() => {

                        p(this.makeConvoTitle(convo.between))
                            .textAlign("left")
                            .marginLeft(0.5, inches)
                            .paddingTop(0.2, inches)
                            .width(100, pct)
                            .marginTop(0)
                            .fontSize(1, em)
                            .fontWeight("bold")

                        p(util.formatTime(convo.messages.last.time))
                            .paddingTop(0.2, inches)
                            .fontSize(0.8, em)
                            .marginRight(0.1, inches)
                            .color("var(--divider")
                    })
                    .justifyContent("space-between")
                    .marginBottom(0)
    
                    p(convo.messages.last.text)
                        .fontSize(0.8, em)
                        .textAlign("left")
                        .marginLeft(0.5, inches)
                        .marginBottom(2, em)
                        .color("var(--divider)")
                })
            .background(convo.id === this.selectedConvoID ? "var(--darkbrown)" : "")
                .onClick(() => {
                    this.onSelect(i)
                })
            })
        })
        .minWidth(15, vw)
        .height(100, vh)
        .gap(0, em)
    }

    makeConvoTitle(members) {
        let membersString = ""
        for(let i=0; i<members.length; i++) {
            let member = members[i]
            if(member.email === global.profile.email) {
                continue;
            }
            if(members.length > 2) {
                membersString += member.firstName
            } else {
                membersString += member.firstName + " " + member.lastName
            }
        }
        return membersString
    }
}

register(MessagesSidebar)