<template>
  <div class="container-fluid">
    <div class="row">
      <FormHeader title="Login" subtitle="Crea el perfil de tu entidad y publica tus productos y servicios con valores" 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">
      *¿Todavía no formas parte de Consumo Cuidado?
      <NuxtLink to="/registro"><b>Únete</b></NuxtLink
      >.
    </p>

  </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;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient($color-consumo-base-light, $color-bg-light);
  border-radius: 1rem;
  padding: 2rem;
  gap: 3rem;
  margin: 2rem 0 4rem;
  color: $color-primary;

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

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  width: 100%;
  gap: 1rem;
}

.help {
  color: $color-primary;
  text-decoration: none;
  b {
    color: $color-button;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
      color: blue
    }
  }
}

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

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