import "./PeopleCard.js"
import "/_/code/components/LoadingCircle.js"

css(`
    people- {
        font-family: 'Arial';
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    people- input::placeholder {
        color: var(--headertext);
        opacity: 0.35;
    }
    peoplelist- {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }
`)

class PeopleList extends Shadow {
    constructor(members, isLoading) {
        super()
        this._members = members
        this._isLoading = isLoading
    }

    render() {
        VStack(() => {
            if (this._isLoading) {
                LoadingCircle()
            } else if (this._members.length === 0) {
                VStack(() => {
                    p("No members match your search")
                        .margin(0)
                        .fontSize(0.9, em)
                        .color("var(--headertext)")
                        .opacity(0.35)
                        .textAlign("center")
                })
                .flex(1)
                .justifyContent("center")
                .alignItems("center")
            } else {
                this._members.forEach((person, i) => {
                    PeopleCard(person)
                    if (i < this._members.length - 1) {
                        VStack(() => {}).height(1, px).background("var(--divider)").marginLeft(4.6, em)
                    }
                })
            }
        })
        .flex(1)
        .overflowY("auto")
        .paddingBottom(1, em)
    }
}

register(PeopleList)