<template>
	<App>
		<Header />
		<el-card>
			<div
				class="mx-auto my-4 flex h-80 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>
					<el-input
						v-model="credential.email"
						placeholder="Username"
						clearable
						class="h-12" />
				</div>
				<div class="flex w-full flex-col gap-2">
					<label class="w-full text-[#b3b3b3]"> Password </label>
					<el-input
						v-model="credential.password"
						type="password"
						placeholder="Password"
						show-password
						class="h-12" />
				</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 px-8 py-4"
					v-on="
						isSignup
							? { click: () => signUp() }
							: { click: () => signIn() }
					">
					{{ isSignup ? 'Sign Up' : 'Login' }}
				</button>
			</div>
		</el-card>
	</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>
