import server from "/@server/server.js"

css(`
    jobcard- p {
        font-size: 0.85em;
        color: var(--text);
    }
`)

class JobCard extends Shadow {
    constructor(job) {
        super()
        this.job = job
    }

    render() {
        VStack(() => {
            HStack(() => {
                h3(this.job.title)
                    .color("var(--headertext)")
                    .fontSize(1.3, em)
                    .fontWeight("normal")
                    .margin(0, em)
            })
            .justifyContent("space-between")
            .verticalAlign("center")

            p(this.job.company ?? "No company added")
            .marginTop(0.75, em)
            p(this.job.location ?? "No location added")
            .marginTop(0.25, em)
            p(this.job.salary_number ? this.salaryLabel(this.job.salary_number, this.job.salary_period) : "No salary added")
            .marginTop(0.75, em)
        })
        .paddingVertical(1.5, em)
        .paddingHorizontal(3.5, em)
        .marginHorizontal(1, em)
        .borderRadius(10, px)
        .background("var(--desktop-item-background)")
        .border("1px solid var(--desktop-item-border)")
        .boxSizing("border-box")
    }

    salaryLabel(number, period) {
        const formattedNumber = new Intl.NumberFormat('en-US', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }).format(Number(number));

        if (period === "one-time") {
            return `One-time payment of $${formattedNumber}`
        } else {
            return `$${formattedNumber}/${period}`
        }
    }

    async deleteJob(job) {
        const result = await server.deleteJob(job.id, job.network_id, global.profile.id)
        if (result === null) {
            console.log("Failed to delete job")
        }
    }
}

register(JobCard)