<template>
  <tr :class="{ 'tw-opacity-50': !show.isActive }">
    <td>
      <Image
        :image="showLogo"
        class="tw-w-12 tw-bg-gray-300 tw-rounded dark:tw-bg-neutral-700"
        square
      />
    </td>
    <td>
      <router-link
        :to="{ name: 'show', params: { showId: show.id } }"
        class="tw-text-inherit tw-block tw-no-underline tw-group"
      >
        <SafeHTML :html="show.name" class="tw-block tw-font-semibold group-hover:tw-underline" />
        <SafeHTML :html="show.shortDescription" class="tw-text-sm" />
        <div v-if="radioSettings?.program.fallback.showId === show.id" class="tw-mt-1">
          <APill
            class="tw-text-yellow-600 tw-text-sm tw-bg-stripes tw-bg-stripes-fallback"
            :title="t('show.flags.stationFallback.description')"
          >
            {{ t('show.flags.stationFallback.label') }}
          </APill>
        </div>
      </router-link>
    </td>
    <td>
      <ul v-if="categories.value.length > 0" class="inline-list">
        <li v-for="category in categories.value" :key="category.id">{{ category.name }}</li>
      </ul>
    </td>
    <td>
      <ATime v-if="updatedAt" :time="updatedAt" class="tw-block">
        {{ updatedAtRelative }}
      </ATime>
      <span v-if="show.updatedBy" class="tw-block tw-text-sm">
        {{ t('by') }} {{ show.updatedBy }}
      </span>
    </td>
  </tr>
</template>

<script lang="ts" setup>
import { parseISO } from 'date-fns'
import { computed } from 'vue'
import { useI18n } from '@/i18n'
import { useRelationList } from '@/form'
import { Show } from '@/types'
import { useRelativeDistanceToNow } from '@/util'
import { useCategoryStore, useShowStore } from '@/stores'
import { useImage } from '@/stores/images'
import { useCurrentRadioSettings } from '@/stores/radio-settings'
import APill from '@/components/generic/APill.vue'
import ATime from '@/components/generic/ATime.vue'
import Image from '@/components/generic/Image.vue'
import SafeHTML from '@/components/generic/SafeHTML'

const props = defineProps<{
  show: Show
}>()

const { t } = useI18n()
const showStore = useShowStore()
const categoryStore = useCategoryStore()
const radioSettings = useCurrentRadioSettings()

const showLogo = useImage(() => props.show.logoId)
const updatedAt = computed(() => (props.show.updatedAt ? parseISO(props.show.updatedAt) : null))
const updatedAtRelative = useRelativeDistanceToNow(updatedAt, { addSuffix: true })
const categories = useRelationList(showStore, () => props.show, 'categoryIds', categoryStore)
</script>