<script lang="ts" setup>
import { ref } from 'vue';
import { Auth } from '../../connectors/auth.connector';
import router from '../../router';

    const email = ref('');
    const password = ref('');

    const loginFailure = ref<boolean>(false);

    async function login() {
        const success = await Auth.Login(email.value, password.value);

        if (success) {
            router.push('/search');
            return;
        }

        loginFailure.value = true;
    }

</script>

<template>
    <v-form @submit.prevent="login">
    <v-card
      class="mx-auto pa-12 pb-8"
      elevation="8"
      max-width="448"
      rounded="lg"
    >
      <div class="text-subtitle-1 text-medium-emphasis">Account</div>

      <v-text-field
        density="compact"
        placeholder="Email address"
        prepend-inner-icon="mdi-email-outline"
        variant="outlined"
        v-model="email"
        :error="loginFailure"
        @update:model-value="() => loginFailure = false"
      ></v-text-field>

      <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
        Password
      </div>

      <v-text-field
        type="password"
        density="compact"
        placeholder="Enter your password"
        prepend-inner-icon="mdi-lock-outline"
        variant="outlined"
        v-model="password"
        :error="loginFailure"
        @update:model-value="() => loginFailure = false"
      ></v-text-field>

      <v-label
       v-if="loginFailure"
       class="text-red">
        Login failed, please try again.
      </v-label>

      <v-btn
        block
        class="mb-8"
        color="blue"
        size="large"
        variant="tonal"
        type="submit"
      >
        Log In
      </v-btn>

      <v-card-text class="text-center">
        <a
          class="text-blue text-decoration-none"
          href="/register"
          rel="noopener noreferrer"
        >
          Sign up now <v-icon icon="mdi-chevron-right"></v-icon>
        </a>
      </v-card-text>
    </v-card>
</v-form>
</template>
