<script setup>
import AddAction from '@/components/profile/AddAction.vue'
import { onMounted, ref } from 'vue'
import apiClient from '@/services/api-client.js'
import PencilIcon from '@/components/icons/PencilIcon.vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const user = ref(null);

function logout() {
  apiClient.post('/account/logout', null, {
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem('token')
    }
  })
    .then(() => localStorage.removeItem('token'))
    .then(() => window.location = 'https://travelaccomplice.com/login')
}

function destroy() {
  apiClient.delete('/account', {
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem('token')
    }
  })
    .then(() => localStorage.removeItem('token'))
    .then(() => window.location = 'https://travelaccomplice.com/register')
}


onMounted(() => {
  const token = localStorage.getItem('token')
  if (!token) router.push('/')

  apiClient.get('/account/user', {
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem('token')
    }
  })
    .then(res => user.value = res.data.data)
})
</script>

<template>
<ContentWrapper class="h-screen" background>
  <BaseTitle>My Profile</BaseTitle>
    <div class="flex flex-col space-y-2 w-full">
      <BaseCard class="border w-full max-w-screen-xl py-2 px-4 flex flex-col gap-4 relative" v-if="user">
        <div class="flex gap-1">
          <h1 class="font-bold">{{user.name + ' ' + user.surname}}</h1>
          <p>({{user.email}})</p>
        </div>
        <div class="flex gap-5">
          <p>Age: {{user.age}}</p>
          <p>Gender: {{user.gender}}</p>
          <p>Country: {{user.country.country}}</p>
        </div>
        <RouterLink to="/profile/edit"><PencilIcon class="h-10 cursor-pointer bg-zinc-100 rounded-md p-0.5 hover:text-pink-400 absolute top-2 right-2 text-pink-500"/></RouterLink>
      </BaseCard>
      <RouterLink to="/destination/add"><AddAction title="Create Destination" custom-title="Add"/></RouterLink>
      <RouterLink to="/post/add"><AddAction title="Create Post" custom-title="Add" /></RouterLink>
      <div class="flex w-full gap-3">
        <BaseButton class="w-full" @click="logout">Log out</BaseButton>
        <BaseButton @click="destroy" danger class="w-full">Delete Account</BaseButton>
      </div>
    </div>
</ContentWrapper>
</template>

<style scoped>

</style>