<template>
  <BContainer class="container">
    <BRow align-h="start">
      <BCol class="edit-profile">
        <form class="form" @submit.prevent="submitUser">
          <h1 class="title">Editar perfil</h1>
          <FormInput
            v-model="form.full_name"
            type="text"
            label-text="Nombre de usuario"
            @input="form.full_name = $event"
          />
          <FormInput
            v-model="form.email"
            type="text"
            label-text="Email"
            @input="form.email = $event"
          />
          <v-checkbox
            v-model="form.notify"
            label="Recibir notificaciones"
          />
          <small v-if="error" class="error">Ha habido un error</small>
          <small v-if="success" class="success">Perfil actualizado con éxito</small>
          <div class="submit-btn">
            <SubmitButton text="guardar" image-url="" />
          </div>
        </form>
        <NuxtLink to="/editar/perfil/contrasena">Cambiar contraseña</NuxtLink>
      </BCol>
    </BRow>
  </BContainer>
</template>

<script>
import { mapState, mapActions } from 'pinia'
import { useAuthStore } from '@/stores/auth'

export default {
  setup() {
    definePageMeta({
      layout: 'editar',
      middleware: 'auth',
      auth: { authority: 'SHOP_USER' },
    })
  },
  data() {
    return {
      form: {
        full_name: null,
        email: null,
        notify: false,
      },
      error: false,
      success: false,
    }
  },
  async fetch() {
    const config = useRuntimeConfig()
    try {
      await $fetch(`/my_user/`, {
        baseURL: config.public.baseURL,
        method: 'GET',
        body: JSON.stringify(this.form),
      })
      //console.log('User data fetched successfully:', response)
    } catch (err) {
      console.error('Error fetching user data:', err)
      this.error = true
      return
    }
    this.form.full_name = response.full_name
    this.form.email = response.email
    this.form.notify = response.notify
  },
  computed: {
    ...mapState(useAuthStore, ['id', 'access']),
  },
  methods: {
    ...mapActions( useAuthStore, ['setUser']),
    async submitUser() {
      this.error = false
      const config = useRuntimeConfig()
      try {
        const userId = this.id
        const access = this.access
        await $fetch(`/users/${userId}/`, {
          baseURL: config.public.baseURL,
          method: 'PUT',
          body: this.form,
          headers: {
            Authorization: `Bearer ${access}`
          }
        })
        await this.setUser()
        this.success = true
      } catch (err) {
        console.error('Error updating user:', err)
        this.error = true
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  margin-top: 40px;
  margin-bottom: 40px;
}

.edit-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  color: $color-navy;
  font-size: $xxl;
  margin-bottom: 40px;
  text-align: left;
  width: 45%;

  @include mobile {
    width: 80%;
    margin-top: 70px;
  }
  @include desktop {
    width: 25%;
  }
}

.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  label {
    text-align: left;
    color: $color-navy;
    font-weight: $bold;
    font-size: $xs;
  }
}
.error {
  color: crimson;
}

.success {
  color: green;
}

.checkbox-group {
  display: flex;
  align-items: center;
  border: 1px solid $color-navy;
  padding: 10px;
  border-radius: 5px;
}
</style>
