<template>
    <App>
        <Header />
        <div class="bg-secondary mx-auto mt-12 flex h-96 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
            <div class="flex w-full flex-col gap-2">
                <label class="w-full text-[#b3b3b3]"> Email </label>
                <input type="text"
                    class="bg-lightgray border-lightgray h-12 w-full rounded-md border p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
                    v-model="credential.email" placeholder="username" />
            </div>
            <div class="flex w-full flex-col gap-2">
                <label class="w-full text-[#b3b3b3]"> Password </label>
                <input type="password"
                    class="bg-lightgray border-lightgray h-12 w-full rounded-md border p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
                    v-model="credential.password" placeholder="password" />
            </div>
            <p class="cursor-pointer text-blue-500 underline" @click="toggleSignup()">
                {{
                    isSignup
                    ? 'Already have an account? Login'
                    : "Don't have an account? Sign up"
                }}
            </p>
            <button class="w-fit rounded-lg bg-blue-500 py-4 px-8" v-on="isSignup
                        ? { click: () => signUp() }
                        : { click: () => signIn() }
                    ">
                {{ isSignup ? 'Sign Up' : 'Login' }}
            </button>
        </div>
    </App>
</template>

<script setup lang="ts">
definePageMeta({
    middleware: ['auth'],
})

const credential = reactive({
    email: '',
    password: '',
})

const router = useRouter()
const user = useSupabaseUser()
const isSignup = ref<Boolean>(false)

const toggleSignup = () => {
    isSignup.value = !isSignup.value
}

const signUp = async () => {
    const error = userSignUp(credential.email, credential.password)

    console.log('error', error)
}

const signIn = async () => {
    const error = userSignIn(credential.email, credential.password)

    console.log('error', error)
}

watch(
    () => user.value,
    () => {
        if (user.value) {
            router.push('/notes')
        }
    }
)
</script>
