const env = import.meta.env

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

    render() {
        ZStack(() => {
            img(window.matchMedia('(prefers-color-scheme: dark)') ? "/_/icons/columnwhite.svg" : "/_/icons/logo.svg", window.isMobile() ? "5vmax" : "3vmax")
                .position("absolute")
                .top(5, em)
                .left(2, em)
                .onClick((done) => {
                    window.navigateTo("/")
                })

            form(() => {
                input("Email", "70vw")
                    .attr({name: "email", type: "email"})
                    .margin(1, em)
                    .padding(1, em)
                    .styles(this.inputStyles)
                input("Password", "70vw")
                    .attr({name: "password", type: "password"})
                    .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)")
            })
            .attr({action: `${env.VITE_API_URL}/login`, method: "POST"})
            .x(50, vw).y(50, vh)
            .center()
        })
        .background("var(--main)")
        .width(100, vw)
        .height(100, pct)
        .margin(0)
    }
}

register(Login)