<template>
    <IonPage>
        <IonHeader>
            <IonToolbar>
                <ion-buttons slot="start">
                    <ion-back-button text=""></ion-back-button>
                </ion-buttons>
            </IonToolbar>
        </IonHeader>
        <IonContent fullscreen>
            <div class="p-12">
                <div class="grid place-content-center">
                    <div
                        class="leading-1 text-3xl"
                        style="font-family: Lalezar"
                    >
                        <div class="inline-block">
                            <img
                                class="h-[30px] relative top-1 left-1"
                                src="@/assets/logo.svg"
                            />
                        </div>
                        reeShort
                    </div>
                </div>
                <div class="mt-12 relative">
                    <Transition name="fade">
                        <div
                            v-if="mode === 0"
                            class="absolute top-0 left-0 w-full"
                        >
                            <div class="text-xl font-bold">Sign in</div>
                            <div class="text-base">
                                <input
                                    type="text"
                                    inputmode="email"
                                    class="w-full h-12 mt-6 rounded-md px-4 bg-neutral-800 active:border-2 focus:border-2 border-prim focus:border-prim outline-none"
                                    placeholder="Email Address"
                                    v-model="loginForm.email"
                                />

                                <input
                                    type="password"
                                    class="w-full h-12 mt-6 rounded-md px-4 bg-neutral-800 active:border-2 focus:border-2 border-prim focus:border-prim outline-none"
                                    placeholder="Password (6-32 Characters)"
                                    v-model="loginForm.password"
                                />

                                <div class="mt-6 font-bold">
                                    <button
                                        class="w-full h-12 bg-prim text-white rounded-md disabled:bg-opacity-50 disabled:text-opacity-50"
                                        :disabled="
                                            loginDisabled || loginForm.loading
                                        "
                                        @click="login"
                                    >
                                        Sign in
                                    </button>

                                    <button
                                        class="w-full h-12 mt-6 bg-white text-black rounded-md"
                                        @click="mode = 1"
                                    >
                                        Create an account
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div v-else class="absolute top-0 left-0 w-full">
                            <div class="text-xl font-bold">
                                Create an account
                            </div>
                            <div class="text-base">
                                <input
                                    type="text"
                                    inputmode="email"
                                    class="w-full h-12 mt-6 rounded-md px-4 bg-neutral-800 active:border-2 focus:border-2 border-prim focus:border-prim outline-none"
                                    placeholder="Email Address"
                                    v-model="registerForm.email"
                                />

                                <input
                                    type="password"
                                    class="w-full h-12 mt-6 rounded-md px-4 bg-neutral-800 active:border-2 focus:border-2 border-prim focus:border-prim outline-none"
                                    placeholder="Password (6-32 Characters)"
                                    v-model="registerForm.password"
                                />

                                <input
                                    type="password"
                                    class="w-full h-12 mt-6 rounded-md px-4 bg-neutral-800 active:border-2 focus:border-2 border-prim focus:border-prim outline-none"
                                    placeholder="Confirm Password"
                                    v-model="registerForm.confirmPassword"
                                />

                                <div class="mt-6 font-bold">
                                    <button
                                        class="w-full h-12 bg-prim text-white rounded-md disabled:bg-opacity-50 disabled:text-opacity-50"
                                        :disabled="registerDisabled"
                                        @click="register"
                                    >
                                        Sign up
                                    </button>

                                    <button
                                        class="w-full h-12 mt-6 bg-white text-black rounded-md"
                                        @click="mode = 0"
                                    >
                                        Sign in
                                    </button>
                                </div>
                            </div>
                        </div>
                    </Transition>
                    <Transition name="fade"> </Transition>
                </div>
            </div>
        </IonContent>
    </IonPage>
</template>
<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import {
    IonPage,
    IonContent,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonButtons,
    IonBackButton,
    IonButton,
    toastController,
    useIonRouter,
} from "@ionic/vue";
import isEmail from "validator/lib/isEmail";
import http from "@/plugins/http";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
import toast from "@/plugins/toast";

const router = useIonRouter();
const { setUser } = useUserStore();
const mode = ref(0);
const loginForm = reactive({
    email: "",
    password: "",
    loading: false,
});
const registerForm = reactive({
    email: "",
    password: "",
    confirmPassword: "",
    loading: false,
});
const loginDisabled = computed(() => {
    return !loginForm.email || !loginForm.password;
});
const registerDisabled = computed(() => {
    return (
        !registerForm.email ||
        !registerForm.password ||
        !registerForm.confirmPassword
    );
});

async function login() {
    if (!loginForm.email) {
        toast("Email is required", { type: "error" });
        return;
    }
    try {
        loginForm.loading = true;
        const { token } = await http.post("/auth/login", {
            username: loginForm.email,
            password: loginForm.password,
        });
        http.setToken(token);
        const user = await http.get("/users/my");
        setUser(user);
        if (router.canGoBack()) {
            router.back();
        } else {
            router.replace("/");
        }
    } catch (error: any) {
        presentToast(error.errors[0]?.message, { type: "error" });
    }
    loginForm.loading = false;
}
async function register() {
    if (!registerForm.email) {
        presentToast("Email is required", { type: "error" });
        return;
    }
    if (!isEmail(registerForm.email)) {
        presentToast("Invalid email", { type: "error" });
        return;
    }
    if (!registerForm.password) {
        presentToast("Password is required", { type: "error" });
        return;
    }
    if (registerForm.password.length < 6) {
        presentToast("Password must be at least 6 characters", {
            type: "error",
        });
        return;
    }
    if (registerForm.password !== registerForm.confirmPassword) {
        presentToast("Passwords do not match", { type: "error" });
        return;
    }
    try {
        registerForm.loading = true;
        const { token } = await http.post("/auth/register", {
            email: registerForm.email,
            password: registerForm.password,
        });
        http.setToken(token);
        const user = await http.get("/users/my");
        setUser(user);
        if (router.canGoBack()) {
            router.back();
        } else {
            router.replace("/");
        }
    } catch (error: any) {
        presentToast(error.errors[0]?.message, { type: "error" });
    }
    registerForm.loading = false;
}
</script>
<style lang="less" scoped>
ion-toolbar {
    --background: transparent;
    --border-width: 0;
    --border-style: none;
}
.fade-enter-active,
.fade-leave-active {
    transition:
        opacity 0.3s ease-in-out,
        transform 0.3s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-from {
    transform: translateX(100%);
}

.fade-leave-to {
    transform: translateX(-100%);
}
</style>
