<template>
  <div class="container-fluid">
    <div class="row">
      <FormHeader title="Login" class="col-12" />
    </div>

    <form class="form" align="center" @submit.prevent="userLogin">
      <FormInput 
        v-model="loginData.email" 
        required 
        type="text" 
        label-text="Email"
        @input="loginData.email = $event" />

      <FormInput
        v-model="loginData.password"
        type="password"
        label-text="Contraseña"
        required
        @input="loginData.password = $event"
      />

      <p v-if="error" class="error">
        {{ error }}
      </p>

      <small class="help" align="center">
        <NuxtLink to="/login/restablecer"
          >¿No recuerdas tu contraseña?</NuxtLink
        >
      </small>
      <SubmitButton 
        text="Aceptar" 
        image-url="" />
    </form>
    <!-- Descomentar cuando esté la funcionalidad completa -->
    <!-- <div class="row">
      <div class="other-sign-in col-12" align="center">
        <GoogleSignIn />
        <FacebookSignIn />
      </div>
    </div> -->

    <p class="help" align="center">
      *Si no estás registrado puedes registrarte en este
      <NuxtLink to="/registro"><b>enlace</b></NuxtLink
      >.
    </p>

    <div class="row">
      <BannerCoop />
    </div>
  </div>
</template>

<script>
import { useAuthStore } from '@/stores/auth'
import { mapActions } from 'pinia'
export default {
  setup() {
    definePageMeta({
      layout: 'main',
    })
    const authStore = useAuthStore()
    return { authStore }
  },
  data() {
    return {
      loginData: {
        email: '',
        password: '',
      },
      error: '',
    }
  },
  methods: {
    ...mapActions(useAuthStore, ['login', 'setUser']),
    async userLogin() {
      this.error = ''
      try {
        await this.login(this.loginData.email, this.loginData.password)
        await this.setUser()
        this.$router.push('/')
      } catch (err) {
        if (err.status === 400 || err.status === 401) {
          this.error =
            'Los datos de acceso no son correctos o no se ha activado su cuenta.'
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.container-fluid {
  margin-top: 5rem;
  margin-bottom: 5rem;

  @include mobile {
    margin-top: 7rem;
  }
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.help {
  color: $color-navy;
}

.other-sign-in {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error {
  color: $color-error;
}
</style>
