import { Preferences } from '@capacitor/preferences';
import util from "../../util.js"
import "./Login.js";
import "./Signup.js"

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

    selectedPage = 1 // 1 == login, 2 == signup

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

            HStack(() => {
                    p("Login")
                    .fontWeight(this.selectedPage === 1 ? "bold" : "normal")
                    .padding(0.75, em)
                    .borderRadius(12, px)
                    .background(this.selectedPage === 1 ? "var(--loginButton)" : "transparent")
                    .onTap(() => {
                        this.selectedPage = 1;
                        this.rerender();
                    })

                    p("Sign Up")
                    .fontWeight(this.selectedPage === 2 ? "bold" : "normal")
                    .padding(0.75, em)
                    .borderRadius(12, px)
                    .background(this.selectedPage === 2 ? "var(--loginButton)" : "transparent")
                    .onTap(() => {
                        this.selectedPage = 2;
                        this.rerender();
                    })
                })
                .fontFamily("Arial")
                .padding(0.25, em)
                .borderRadius(12, px)
                .background("var(--loginBackground)")
                .color("var(--text)")
                .horizontalAlign("center")
                .margin("auto")
                .marginTop(7.5, em)
                .marginBottom(2, em)
                .gap(0.5, em)

                switch (this.selectedPage) {
                    case 1:
                        Login()
                        break;
                    case 2:
                        Signup()
                        break;
                }

        })
        .width(100, vw)
        .height(100, vh)
        .margin(0)
    }
}

register(AuthPage)