ForumMobile/src/apps/Messages/Messages.js

import "./MessagesSidebar.js"
import "./MessagesPanel.js"

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

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

    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 Messages extends Shadow {
    conversations = []
    selectedConvoID = null
    onConversationSelect(i) {
        console.log("convo selected: ", i)
        this.selectedConvoID = i
        this.$("messagessidebar-").rerender()
        this.$("messagespanel-").rerender()
    }

    getConvoFromID(id) {
        for(let i=0; i<this.conversations.length; i++) {
            if(this.conversations[i].id === id) {
                return this.conversations[i]
            }
        }
    }

    render() {
        ZStack(() => {
            HStack(() => {
                MessagesSidebar(this.conversations, this.selectedConvoID, this.onConversationSelect)

                VStack(() => {
                    if(this.getConvoFromID(this.selectedConvoID)) {
                        MessagesPanel(this.getConvoFromID(this.selectedConvoID).messages)
                    } else {
                        MessagesPanel()
                    }

                    input("Send Message", "93%")
                        .paddingVertical(1, em)
                        .paddingHorizontal(2, em)
                        .color("var(--accent)")
                        .background("var(--darkbrown)")
                        .marginBottom(6, em)
                        .border("none")
                        .fontSize(1, em)
                        .onKeyDown((e) => {
                            if (e.key === "Enter") {
                                window.Socket.send({app: "MESSAGES", operation: "SEND", msg: { conversation: `CONVERSATION-${this.selectedConvoID}`, text: e.target.value }})
                                e.target.value = ""
                            }
                        })
                })
                .gap(1, em)
                .width(100, pct)
                .horizontalAlign("center")
                .verticalAlign("end")
            })
            .onAppear(async () => {
                let res = await global.Socket.send({app: "MESSAGES", operation: "GET"})
                if(!res) console.error("failed to get messages")

                if(res.msg.length > 0 && this.conversations.length === 0) {
                    this.conversations = res.msg
                    this.selectedConvoID = this.conversations[0].id
                    this.rerender()
                }

                window.addEventListener("new-message", (e) => {
                    let convoID = e.detail.conversationID
                    let messages = e.detail.messages
                    let convo = this.getConvoFromID(convoID)
                    convo.messages = messages
                    this.rerender()
                })
            })
            .width(100, pct)
            .height(87, pct)
            .x(0).y(13, pct)

            VStack(() => {
                p("Add Message")

                input("enter email...")
                    .color("var(--accent)")
                    .onKeyDown(function (e) {
                        if (e.key === "Enter") {
                            window.Socket.send({app: "MESSAGES", operation: "ADDCONVERSATION", msg: {email: this.value }})
                            this.value = ""
                        }
                    })

                p("x")
                .onClick(function (done) {
                    if(done) {
                        this.parentElement.style.display = "none"
                    }
                })
                .xRight(2, em).y(2, em)
                .fontSize(1.4, em)
                .cursor("pointer")
                
            })
            .gap(1, em)
            .verticalAlign("center")
            .horizontalAlign("center")
            .backgroundColor("black")
            .border("1px solid var(--accent)")
            .position("fixed")
            .x(50, vw).y(50, pct)
            .center()
            .width(60, vw)
            .height(60, pct)
            .display("none")
            .attr({id: "addPanel"})

            HStack(() => {
                input("Search messages... (Coming Soon!)", "45vw")
                    .attr({
                        "type": "text",
                        "disabled": "true"
                    })
                    .fontSize(1.1, em)
                    .paddingLeft(1.3, em)
                    .background("transparent")
                    .border("0.5px solid var(--divider)")
                    .outline("none")
                    .color("var(--accent)")
                    .opacity(0.5)
                    .borderRadius(10, px)
                    .background("grey")
                    .cursor("not-allowed")

                button("+ New Message")
                    .width(13, em)
                    .marginLeft(1, em)
                    .borderRadius(10, px)
                    .background("transparent")
                    .border("0.5px solid var(--divider)")
                    .color("var(--accent)")
                    .fontFamily("Bona Nova")
                    .onHover(function (hovering) {
                        if(hovering) {
                            this.style.background = "var(--green)"

                        } else {
                            this.style.background = "transparent"

                        }
                    })
                    .onClick((done) => {
                        console.log("click")
                        if(done) {
                            this.$("#addPanel").style.display = "flex"
                        }
                        console.log(this, "clicked")
                    })

            })
            .x(55, vw).y(4, pct)
            .position("absolute")
            .transform("translateX(-50%)")
        })
        .boxSizing("border-box")
        .height(100, pct)
        .width(100, pct)
    }
}

register(Messages)