import util from "../../util.js"

class JobForm extends Shadow {
    inputStyles(el) {
        return el
            .background("var(--main)")
            .color("var(--text)")
            .border("1px solid var(--accent)")
            .fontSize(0.9, rem)
            .backgroundColor("var(--darkaccent)")
            .borderRadius(12, px)
            .outline("none")
            .onTouch((start) => {
                if (start) {
                    this.style.backgroundColor = "var(--accent)"
                } else {
                    this.style.backgroundColor = "var(--darkaccent)"
                }
            })
    }

    render() {
        form(() => {
            VStack(() => {
                input("Title", "70vw")
                    .attr({ name: "title", type: "text" })
                    .margin(1, em)
                    .padding(1, em)
                    .styles(this.inputStyles)
                input("Location", "70vw")
                    .attr({ name: "location", type: "text" })
                    .margin(1, em)
                    .padding(1, em)
                    .styles(this.inputStyles)
                input("Company", "70vw")
                    .attr({ name: "company", type: "text" })
                    .margin(1, em)
                    .padding(1, em)
                    .styles(this.inputStyles)
                input("salary", "70vw")
                    .attr({ name: "salary", type: "number" })
                    .margin(1, em)
                    .padding(1, em)
                    .styles(this.inputStyles)
                input("Description", "70vw")
                    .attr({ name: "description", type: "text" })
                    .margin(1, em)
                    .padding(1, em)
                    .styles(this.inputStyles)
                button("==>")
                    .margin(1, em)
                    .padding(1, em)
                    .fontSize(0.9, rem)
                    .borderRadius(12, px)
                    .background("var(--accent)")
                    .color("var(--text)")
                    .border("1px solid var(--accent)")
            })
        })
        .position("absolute")
        .height(90, pct)
        .width(95, pct)
        .top(50, pct).left(50, pct)
        .center()
        .background("var(--main)")
        .zIndex(100)
        .borderTopLeftRadius("10px")
        .borderTopRightRadius("10px")
        .boxSizing("border-box")
        .transform(`translate(-50%, -45%)`)
    }

    tryThis() {
        console.log("hello2")
    }
}

register(JobForm)