<template>
	<!--  https://www.creative-tim.com/twcomponents/component/simple-login-form-3 -->
	<div class="min-h-screen flex items-center justify-center w-full dark:bg-gray-950">
		<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg px-8 py-6 max-w-md">
			<h1 class="text-2xl font-bold text-center mb-4 dark:text-gray-200">Bienvenido!</h1>
			<form action="#">
				<div class="mb-4">
					<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Correo
						electrónico</label>
					<input type="email" id="email" v-model="email"
						class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
						placeholder="your@email.com" required>
				</div>
				<div class="mb-4">
					<label for="password"
						class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Contraseña</label>
					<input type="password" id="password" v-model="password"
						class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
						placeholder="Enter your password" required>
					<a href="#"
						class="text-xs text-gray-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Olvidó
						la contraseña?</a>
				</div>
				<div class="flex items-center justify-between mb-4">
					<div class="flex items-center">
						<input type="checkbox" id="remember"
							class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 focus:outline-none"
							checked>
						<label for="remember"
							class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Recuérdame</label>
					</div>
					<a href="#"
						class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Crear
						cuenta</a>
				</div>
				<button @click="login" type="button"
					class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Login</button>
			</form>
		</div>
	</div>
</template>


<script setup>
import { useUserStore } from '@/stores/user'
import { onMounted, ref } from 'vue'
import PocketBase from 'pocketbase';
import router from '@/router';

// access the `store` variable anywhere in the component ✨
const storeUser = useUserStore()

let pb = null
let email = ref('p40store@gmail.com')
let password = ref('p40store')

onMounted(() => {
	pb = new PocketBase('http://127.0.0.1:8090');
})

const login = async () => {
	const authData = await pb.collection('users').authWithPassword(
		email.value,
		password.value,
	).then(function (result) {
		console.log(pb.authStore.isValid);
		storeUser.user = pb.authStore.model
		storeUser.isValid = pb.authStore.isValid
		console.log(storeUser.user)
		if (storeUser.isValid) {
			router.push('listas')
		}
	}).catch(function () {
		alert('Parámetros incorrectos')
	})

}

</script>