<script setup lang="ts">
const props = defineProps<{
  bookingToken: string
  routeSummary: string
  departureCode: string
  arrivalCode: string
  departureDate: string
  price: number
  passengers: { adult: number; child: number; infant: number }
}>()

const user = useSupabaseUser()
const { isWatched, getWatchedItem, add, remove } = useWatchlist()

const toggling = ref(false)
const watched = computed(() => isWatched(props.bookingToken))

async function toggle() {
  if (!user.value) {
    await navigateTo('/auth')
    return
  }

  toggling.value = true
  if (watched.value) {
    const item = getWatchedItem(props.bookingToken)
    if (item) await remove(item.id)
  } else {
    await add({
      bookingToken: props.bookingToken,
      routeSummary: props.routeSummary,
      departureCode: props.departureCode,
      arrivalCode: props.arrivalCode,
      departureDate: props.departureDate,
      price: props.price,
      passengers: props.passengers
    })
  }
  toggling.value = false
}
</script>

<template>
  <UButton
    :icon="watched ? 'i-lucide-heart' : 'i-lucide-heart'"
    :color="watched ? 'error' : 'neutral'"
    :variant="watched ? 'soft' : 'ghost'"
    :loading="toggling"
    size="sm"
    @click.stop="toggle"
  />
</template>
