<script setup>

import BaseCard from '@/components/UI/BaseCard.vue'
import { onMounted, ref } from 'vue'
import apiClient from '@/services/api-client.js'

const user = ref();

const name = defineModel('name')
const surname = defineModel('surname')
const email = defineModel('email')
const age = defineModel('age')
const gender = defineModel('gender')

function handleUpdate() {
  let formData = {}
  if (user.value.email === email.value) {
    formData = {
      name: name.value,
      surname: surname.value,
      age: age.value,
      gender: gender.value,
    }
  } else {
    formData = {
      name: name.value,
      surname: surname.value,
      age: age.value,
      gender: gender.value,
      email: email.value
    }
  }

  apiClient.patch('/account', formData, {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`
    }
  }).then(res => localStorage.setItem('user', JSON.stringify(res.data.data.user)))
    .then(() => window.location = 'http://localhost:5173/profile')
}

onMounted(() => {
  apiClient.get('/account/user', {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`
    }
  })
    .then(res => {
      user.value = res.data.data
      name.value = res.data.data.name
      surname.value = res.data.data.surname
      age.value = res.data.data.age
      gender.value = res.data.data.gender
      email.value = res.data.data.email
    })
})
</script>

<template>
  <ContentWrapper background class="flex h-screen w-full justify-center">
    <BaseCard v-if="user" class="flex justify-center w-11/12 sm:w-auto p-5 mt-20 mb-20">
      <form class="flex flex-col w-full sm:w-96 space-y-2.5 items-center">
        <h1 class="font-bold text-2xl mb-4">Update user</h1>
        <div class="flex sm:flex-row flex-col gap-3 w-full">
          <div class="flex flex-col w-full">
            <label for="name" class="mb-1">Name</label>
            <input type="text" id="name" class="border rounded-md h-9 p-2 w-full" v-model.trim="name">
          </div>
          <div class="flex flex-col w-full">
            <label for="surname" class="mb-1">Surname</label>
            <input type="text" id="surname" class="border rounded-md h-9 p-2 w-full" v-model.trim="surname">
          </div>
        </div>

        <div class="flex sm:flex-row flex-col gap-3 w-full">
          <div class="flex flex-col">
            <label for="age" class="mb-1">Age</label>
            <input type="text" id="age" class="border rounded-md h-9 w-full p-2" v-model.trim="age">
          </div>
          <div class="flex flex-col">
            <label for="gender" class="mb-1">Gender</label>
            <input type="text" id="gender" class="border rounded-md h-9 w-full p-2" v-model.trim="gender">
          </div>
        </div>
        <div class="flex flex-col w-full">
          <label for="email" class="mb-1">Email</label>
          <input id="email" type="email" class="border rounded-md h-9 p-2" v-model.trim="email">
        </div>
        <BaseButton @click="handleUpdate" class="w-full !mt-4">Update</BaseButton>
      </form>

    </BaseCard>
  </ContentWrapper>
</template>

<style scoped>

</style>