class MarketSidebar extends Shadow {

    handleChecked(e) {
        let checked = e.target.checked
        let label = $(`label[for="${e.target.id}"]`).innerText
        if(checked) {
            window.setQuery(label.toLowerCase(), true)
        } else {
            window.setQuery(label.toLowerCase(), null)
        }
    }

    render() {
        VStack(() => {

            p("Make")

            HStack(() => {
                input()
                    .attr({
                        "type": "checkbox",
                        "id": "hyperia-check"
                    })
                    .onChange(this.handleChecked)
                label("Hyperia-Made")
                    .attr({
                        "for": "hyperia-check"
                    })
                    .marginLeft(0.5, em)
            })

            HStack(() => {
                input()
                    .attr({
                        "type": "checkbox",
                        "id": "america-check"
                    })
                    .onChange(this.handleChecked)
                label("America-Made")
                    .attr({
                        "for": "america-check"
                    })
                    .marginLeft(0.5, em)
            })

            p("Condition")

            HStack(() => {
                input()
                    .attr({
                        "type": "checkbox",
                        "id": "new-check"
                    })
                    .onChange(this.handleChecked)
                label("New")
                    .attr({
                        "for": "new-check"
                    })
                    .marginLeft(0.5, em)
            })

            HStack(() => {
                input()
                    .attr({
                        "type": "checkbox",
                        "id": "used-check"
                    })
                    .onChange(this.handleChecked)
                label("Used")
                    .attr({
                        "for": "used-check"
                    })
                    .marginLeft(0.5, em)
            })
        })
        .paddingTop(12, vh)
        .paddingLeft(3, em)
        .paddingRight(3, em)
        .gap(1, em)
        .minWidth(10, vw)
        .userSelect('none')
    }
}

register(MarketSidebar)