<script setup>
import { onMounted, ref } from 'vue'
import apiClient from '@/services/api-client.js'
import { useRoute } from 'vue-router'
import BaseCard from '@/components/UI/BaseCard.vue'
import BaseButton from '@/components/UI/BaseButton.vue'

const authenticated = ref(false)
const id = ref(null)
const user = JSON.parse(localStorage.getItem('user'))

const destination = ref({})
const attendCount = ref(0)
const attends = ref(false)
const author = ref(false)

onMounted(() => {
  if (localStorage.getItem('token')) {
    authenticated.value = true
  }

  id.value = useRoute().params.id;

  apiClient.get(`/destinations/${useRoute().params.id}`)
    .then(res => destination.value = res.data.data)
    .then(() => author.value = user.id === destination.value.user.id)

  apiClient.get(`/attends/total/${useRoute().params.id}`)
    .then(res => attendCount.value = res.data.data)

  apiClient.post(`/attends/check/${useRoute().params.id}`, null, {
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem('token')
    }
  })
    .then(res => attends.value = res.data.attends)
})

function handleJoin() {
  const credentials = `Bearer ${localStorage.getItem('token')}`
  apiClient.post(`/attends/${id.value}`, null, {
    headers: {
      Authorization: credentials,
      "Content-Type": 'application/json'
    }
  })
    .then(() => location.reload())
}

function handleDiscard() {
  const credentials = `Bearer ${localStorage.getItem('token')}`
  apiClient.delete(`/attends/${id.value}`, {
    headers: {
      Authorization: credentials,
      "Content-Type": 'application/json'
    }
  })
    .then(() => location.reload())
}
</script>

<template>
  <ContentWrapper class='justify-center items-center h-1/3' background>
    <BaseCard v-if="destination" class="max-w-3/4 w-1/2 m-20 p-10">
      <div class="grid sm:grid-cols-2 grid-cols-1 gap-x-5">
        <div class="overflow-hidden rounded-md h-min">
          <img class="" :src='`https://api.travelaccomplice.com/${destination.image_url}`' alt="Background image">
        </div>
        <div>
          <h1 class="font-bold text-2xl py-1">{{destination.title}}</h1>
          <hr class="mb-2">
          <p v-if="destination.minimum_age"><strong class="text-red-600">Minimum age:</strong> {{destination.minimum_age}}</p>
          <p><strong>Where?</strong> {{destination.start_location}}</p>
          <p v-if="destination.country"><strong>Country:</strong> {{destination.country.country}}</p>
          <p v-if="destination.user" class="mt-2"><strong>Author:</strong> {{destination.user.name}} {{destination.user.surname}}</p>
          <p class="mt-5"><strong>About</strong></p>
          <p>{{destination.description}}</p>

          <div class="flex flex-col items-end mt-4 gap-2">
            <div>
              <p><RouterLink class="text-pink-600 underline cursor-pointer" :to='`/destinations/${destination.id}/attends`'>Already attending:</RouterLink> {{attendCount}}</p>
              <BaseButton v-if="authenticated && !author && !attends" @click="handleJoin">Join!</BaseButton>
              <BaseButton danger v-if="authenticated && !author && attends" @click="handleDiscard">Discard!</BaseButton>
              <p class="text-gray-500 mt-5" v-if="author">You can not attend your own event!</p>
            </div>
            <BaseButton v-if="!authenticated" link to="/login">Login to Join!</BaseButton>
          </div>
        </div>
      </div>
    </BaseCard>
  </ContentWrapper>


</template>

<style scoped>

</style>