import './ForumPanel.js'

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

    forum- 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 Forum extends Shadow {

    selectedForum = "HY"

    render() {
        ZStack(() => {
            HStack(() => {
                VStack(() => {
                    img("/_/icons/logo.svg", "2em")
                        .padding(0.8, em)
                        .borderRadius(12, px)
                        .marginHorizontal(1, em)
                        .onHover(function (hovering) {
                            if(hovering) {
                                this.style.background = "var(--darkbrown)"
                            } else {
                                this.style.background = ""
                            }
                        })
                        .opacity(0)

                    img("/_/icons/place/austin.svg", "2em")
                        .padding(0.8, em)
                        .borderRadius(12, px)
                        .marginHorizontal(1, em)
                        .onHover(function (hovering) {
                            if(hovering) {
                                this.style.background = "var(--darkbrown)"
                            } else {
                                this.style.background = ""
                            }
                        })
                        .opacity(0)

                })
                .height(100, vh)
                .paddingLeft(2, em)
                .paddingRight(2, em)
                .gap(1, em)
                .marginTop(20, vh)

                VStack(() => {

                    ForumPanel()

                    input("Message Forum", "98%")
                        .paddingVertical(1, em)
                        .paddingLeft(2, pct)
                        .color("var(--accent)")
                        .background("var(--darkbrown)")
                        .marginBottom(6, em)
                        .border("none")
                        .fontSize(1, em)
                        .onKeyDown(function (e) {
                            if (e.key === "Enter") {
                                global.Socket.send({app: "FORUM", operation: "SEND", msg: {forum: "HY", text: this.value }})
                                this.value = ""
                            }
                        })
                })
                .gap(0.5, em)
                .width(100, pct)
                .height(100, vh)
                .horizontalAlign("center")
                .verticalAlign("end")
            })
            .width(100, "%")
            .height(87, vh)
            .x(0).y(0, vh)
        })
        .width(100, pct)
        .height(100, pct)
    }

    
}

register(Forum)