<template>
  <q-page padding class="">
    <q-card flat bordered style="max-width: 1200px" class="q-mx-auto">
      <q-card-section>
        <div class="text-h6">Вход в Universo</div>

        <div class="text-subtitle2 text-grey">Страница авторизации</div>
      </q-card-section>
      <q-separator />
      <q-card-section>
        <q-input type="email" class="" outlined v-model="email" label="Введите адрес электронной почты" />

        <q-input type="password" class="q-mt-lg" outlined v-model="password" label="Введите пароль" />
      </q-card-section>
      <q-card-section>
        <q-btn outline :loading="isLoading" color="primary" label="Войти" @click="onLogin" />
      </q-card-section>
      <q-card-section>
        <router-link :to="{ name: 'registration' }" class="text-secondary">Зарегистрировать аккаунт</router-link>
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useCurrentUserStore } from 'src/stores/current-user';
import { mapActions } from 'pinia';
import { Notify } from 'quasar';

export default defineComponent({
  name: 'LoginPage',
  data() {
    return {
      email: '',
      password: '',
      isLoading: false,
    };
  },
  methods: {
    ...mapActions(useCurrentUserStore, ['login', 'getMe', 'logout']),

    onLogin() {
      this.isLoading = true;
      this.login(this.email, this.password, true)
        .then((res) => {
          console.log('result', res);
          this.getMe().then(() => {
            this.$router.push({
              name: 'projects',
            });
          });
        })

        .catch((error) => {
          console.log('error', error);
          Notify.create({
            color: 'negative',
            message: 'Ошибка при входе. Пожалуйста, проверьте свои учетные данные.',
          });
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
  },
});
</script>
<style>
.text-secondary {
  text-decoration: none;
  font-size: 0.8em;
}
</style>
