<script setup lang="ts">
import ConfirmUserDeadline from '~/components/modal/ConfirmUserDeadline.vue'

const props = defineProps<{
  bookRecommendationId: number
}>()
const { $echo } = useNuxtApp()
const authStore = useAuthStore()

const { refresh: deadlineRefresh, status: deadlineStatus, data: deadlines } = useFetch(() => `book-recommendations/${props.bookRecommendationId}/deadlines`)

const columns = [
  {
    label: 'Deadline',
    key: 'deadline',
  },
  {
    label: 'Ziel Seite',
    key: 'target_page',
  },
  {
    label: 'Ziel Kapitel',
    key: 'target_chapter',
  },
  {
    label: '',
    key: 'actions',
  },
]

const dayjs = useDayjs()

const rows = computed(() => {
  return deadlines.value?.map((deadline: any) => {
    return {
      id: deadline.id,
      deadline: dayjs(deadline.deadline).format('DD.MM.YYYY'),
      target_page: deadline.target_page,
      target_chapter: deadline.target_chapter,
      user_deadline: deadline.user_deadlines[0],
      actions: null,
    }
  })
})

onMounted(() => {
  $echo.private(`Deadline`)
    .listen('.DeadlineCreated', (e) => {
      deadlineRefresh()
    })
})
</script>

<template>
  <UTable :columns="columns" :rows="rows" :empty-state="{ icon: 'i-heroicons-calendar-solid', label: 'Keine Deadlines.' }">
    <template #actions-data="{ row }">
      <UBadge v-if="row.user_deadline.completed_at !== null">
        Abgeschlossen - {{ dayjs(row.user_deadline.completed_at).format('DD.MM.YYYY') }}
      </UBadge>
      <ConfirmUserDeadline v-if="row.user_deadline.completed_at === null" :user-deadline-id="row.id" @update="deadlineRefresh" />
    </template>
  </UTable>
</template>

<style scoped>

</style>
