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 {
    friends = []
    conversations = []

    render() {
        ZStack(() => {
            HStack(() => {
                VStack(() => {
                    h3("Friends")
                        .marginTop(0)
                        .marginBottom(1, em)
                        .marginLeft(0.4, em)

                    if (this.friends.length > 1) {
                        for(let i = 0; i < this.friends.length; i++) {
                            p(this.friends[i].name)
                        }
                    } else {
                        p("No Friends!")
                    }
                })
                .height(100, vh)
                .paddingLeft(2, em)
                .paddingRight(2, em)
                .paddingTop(2, em)
                .gap(0, em)
                .borderRight("1px solid var(--accent2)")
            })
            .width(100, "%")
            .x(0).y(13, vh)
            .borderTop("1px solid var(--accent2)")

            p("0 Items")
                .position("absolute")
                .x(50, vw).y(50, vh)
                .transform("translate(-50%, -50%)")

            HStack(() => {
                input("Search messages...", "45vw")
                    .attr({
                        "type": "text"
                    })
                    .fontSize(1.1, em)
                    .paddingLeft(1.3, em)
                    .background("transparent")
                    .border("1px solid var(--accent2)")
                    .outline("none")
                    .color("var(--accent)")
                    .borderRadius(10, px)

                button("Search")
                    .marginLeft(2, em)
                    .borderRadius(10, px)
                    .background("transparent")
                    .border("1px solid var(--accent2)")
                    .color("var(--accent)")
                    .fontFamily("Bona Nova")
                    .onHover(function (hovering) {
                        if(hovering) {
                            this.style.background = "var(--green)"

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

                        }
                    })

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

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

                        }
                    })
                    .onClick((clicking) => {
                        console.log(this, "clicked")
                    })

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

    SidebarName(name) {
        let firstLetter = name[0]

        HStack(() => {
            div(firstLetter)
                .display("flex")
                .justifyContent("center")
                .alignItems("center")   
                .width(1.5, em)
                .height(1.5, em)
                .border("1px solid var(--accent2)")
                .borderRadius(100, "%")
            p(name)
                .marginLeft(1, em)
        })
        .alignItems("center")
        .padding(5, px)
        .borderRadius(0.5, em)
        .cursor("default")
        .onHover(function (hovering) {
            if(hovering) {
                this.style.background = "var(--green)"

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

            }
        })
    }

    connectedCallback() {
        // Optional additional logic
    }
}

register(Forum)