import server from "../../_/code/bridge/server"

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)"
                }
            })
    }

    errorMessage = ""

    render() {
        ZStack(() => {
            p("X")
                .color("var(--darkred)")
                .fontSize(2, em)
                .position("absolute")
                .fontFamily("Arial")
                .marginTop(1, rem)
                .marginLeft(1, rem)
                .onTap(() => {
                    this.toggle()
                })

            form(() => {
                VStack(() => {
                    h1("Create a Job")
                        .color("var(--text)")
                        .textAlign("center")
                        .fontFamily("Arial")
                        .marginTop(1.5, em)

                    input("Title", "70%")
                        .attr({ name: "title", type: "text" })
                        .margin(1, em)
                        .padding(1, em)
                        .styles(this.inputStyles)
                    input("Location", "70%")
                        .attr({ name: "location", type: "text" })
                        .margin(1, em)
                        .padding(1, em)
                        .styles(this.inputStyles)
                    input("Company", "70%")
                        .attr({ name: "company", type: "text" })
                        .margin(1, em)
                        .padding(1, em)
                        .styles(this.inputStyles)
                    HStack(() => {
                        input("Salary", "30%")
                            .attr({ name: "salary_number", type: "number", min: "0", step: "0.01" })
                            .padding(1, em)
                            .marginHorizontal(1, em)
                            .styles(this.inputStyles)
                        select(() => {
                            option("One-time")
                                .attr({ value: "one-time"})
                            option("Hourly")
                                .attr({ value: "hour"})
                            option("Monthly")
                                .attr({ value: "month"})
                            option("Yearly")
                                .attr({ value: "year"})
                        })
                        .attr({ name: "salary_period" })
                        .width(40, pct)
                        .padding(1, em)
                        .marginHorizontal(1, em)
                        .styles(this.inputStyles)
                    })
                    .margin(1, em)
                    .boxSizing("border-box")
                    .verticalAlign("center")
                    .horizontalAlign("center")

                    input("Description", "70%")
                        .attr({ name: "description", type: "text" })
                        .margin(1, em)
                        .padding(1, em)
                        .styles(this.inputStyles)
                    HStack(() => {
                        button("==>")
                            .padding(1, em)
                            .fontSize(0.9, rem)
                            .borderRadius(12, px)
                            .background("var(--searchbackground)")
                            .color("var(--text)")
                            .border("1px solid var(--accent)")  
                            .boxSizing("border-box")
                            .onTouch(function (start) {
                                if (start) {
                                    this.style.backgroundColor = "var(--accent)"
                                } else {
                                    this.style.backgroundColor = "var(--searchbackground)"
                                }
                            })
                    })
                    .width(70, vw)
                    .margin("auto")
                    .fontSize(0.9, rem)
                    .paddingLeft(0, em)
                    .paddingRight(2, em)
                    .marginVertical(1, em)
                    .border("1px solid transparent")

                    p("")
                        .dynamicText("errormessage", "{{}}")
                        .margin("auto")
                        .marginTop(1, em)
                        .color("var(--text)")
                        .fontFamily("Arial")
                        .opacity(.7)
                        .padding(0.5, em)
                        .backgroundColor("var(--darkred)")
                        .width(100, pct)
                        .textAlign("center")
                        .boxSizing("border-box")
                })
                .horizontalAlign("center")
            })
            .onSubmit((e) => {
                e.preventDefault()
                const data = {
                    title: e.target.$('[name="title"]').value,
                    location: e.target.$('[name="location"]').value,
                    company: e.target.$('[name="company"]').value,
                    salary_number: e.target.$('[name="salary_number"]').value,
                    salary_period: e.target.$('[name="salary_period"]').value,
                    description: e.target.$('[name="description"]').value,
                };
                this.handleSend(data)
            })
        })
        .position("fixed")
        .height(window.visualViewport.height - 20, px)
        .width(100, pct)
        .top(100, vh)
        .background("var(--main)")
        .zIndex(4)
        .borderTopLeftRadius("10px")
        .borderTopRightRadius("10px")
        .boxSizing("border-box")
        .border("1px solid var(--accent)")
        .transition("top .3s")
    }

    async handleSend(jobData) {
         if (!jobData.title) {
            this.$(".VStack > p")
            .attr({ errorMessage: 'Jobs must include a title.' })
            .display("")
            
            return;
        } else {
            this.$(".VStack > p").style.display = "none"
        }

        const newJob = {
            title: jobData.title,
            location: jobData.location.trim() === '' ? null : jobData.location.trim(),
            company: jobData.company.trim() === '' ? null : jobData.company.trim(),
            salary_number: jobData.salary_number.trim() === '' ? null : jobData.salary_number,
            salary_period: jobData.salary_number.trim() === '' ? null : jobData.salary_period,
            description: jobData.description.trim() === '' ? null : jobData.description.trim()
        }

        const { data } = await server.addJob(newJob, global.currentNetwork.id, global.profile.id)
        if (data.status === 200) {
            console.log("Added new job: ", data)
            this.toggle()
            window.dispatchEvent(new CustomEvent('new-job', {
                detail: { job: data.job }
            }));
        } else {
            console.log("Failed to add new event: ", data)
            this.$(".VStack > p")
            .attr({ errorMessage: data.error })
            .display("")
        }
    }

    toggle() {
        if(this.style.top === "15vh") {
            this.style.top = "100vh"
            this.pointerEvents = "none"
        } else {
            this.style.top = "15vh"
            this.pointerEvents = "auto"
        }
    }
}

register(JobForm)