<script setup lang="ts">
import { useBookRecommendationStore } from '~/stores/book-recommendations'
import DeleteBookRecommendation from '~/components/modal/DeleteBookRecommendation.vue'
import EditBookRecommendation from '~/components/modal/EditBookRecommendation.vue'
import NewBookRecommendation from '~/components/modal/NewBookRecommendation.vue'
import CastVote from '~/components/modal/CastVote.vue'

const dayjs = useDayjs()
const { $echo } = useNuxtApp()
const authStore = useAuthStore()

const bookRecommendationStore = useBookRecommendationStore()
bookRecommendationStore.fetchRecommendations()

const columns = [
  {
    key: 'book_name',
    label: 'Name',
    sortable: true,
  },
  {
    key: 'author',
    label: 'Autor',
    sortable: true,
  },
  {
    key: 'published_at',
    label: 'Erstveröffentlichung',
    sortable: true,
  },
  {
    key: 'description',
    label: 'Beschreibung',
  },
  {
    key: 'pages',
    label: 'Seiten',
    sortable: true,
  },
  {
    key: 'recommender.name',
    label: 'Empfohlen von',
    sortable: true,
  },
  {
    key: 'created_at',
    label: 'Erstellt am',
    sortable: true,
  },
  {
    key: 'status',
    label: 'Status',
    sortable: true,
  },
  {
    key: 'votes',
    label: 'Votes',
    sortable: true,
  },
  {
    key: 'actions',
    label: '',
  },
]
const sort = ref({
  column: 'votes',
  direction: 'desc',
})

function resolveStatus(status: string) {
  return bookRecommendationStore.statusOptions.find(option => option.value === status)
}

onMounted(() => {
  $echo.private(`BookRecommendation`)
    .listen('.BookRecommendationUpdated', (e) => {
      bookRecommendationStore.updateRecommendationWS(e.bookRecommendation)
    })
    .listen('.BookRecommendationDeleted', (e) => {
      bookRecommendationStore.deleteRecommendationWS(e.bookRecommendation)
    })
    .listen('.BookRecommendationCreated', (e) => {
      bookRecommendationStore.createRecommendationWS(e.bookRecommendation)
    })
  authStore.socketId = $echo.socketId()
})
</script>

<template>
  <div>
    <NewBookRecommendation />
    <UTable :sort="sort" :loading="bookRecommendationStore.fetchRecommendationsStatus === 'pending'" :columns="columns" :rows="bookRecommendationStore.recommendations">
      <template #created_at-data="{ row }">
        <div>{{ dayjs(row.created_at).format('DD.MM.YYYY') }}</div>
      </template>
      <template #published_at-data="{ row }">
        <div>{{ dayjs(row.published_at).format('DD.MM.YYYY') }}</div>
      </template>
      <template #description-data="{ row }">
        <div v-if="row.description">
          {{ `${row.description.substring(0, 50)}...` }}
        </div>
      </template>
      <template #votes-data="{ row }">
        {{ row.votes.length }}
      </template>
      <template #status-data="{ row }">
        <UBadge :color="resolveStatus(row.status)?.color">
          {{ resolveStatus(row.status)?.name }}
        </UBadge>
      </template>
      <template #actions-data="{ row }">
        <div class="flex space-x-2">
          <CastVote :row="row" />
          <EditBookRecommendation :row="row" />
          <DeleteBookRecommendation :row="row" />
        </div>
      </template>
    </UTable>
  </div>
</template>
