<template>
  <div>
    <PageHeader
      :title="t('navigation.show.basicData')"
      :lead="show.name"
      :editing-metadata="show"
    />

    <UnderConstruction class="tw-top-2 tw-right-2 tw-text-xl">
      <template #title>
        <p>
          Dieser Bereich wird demnächst zugunsten einzelner Eingabefelder (wie weiter unten zu
          sehen) aufgelöst.
        </p>
        <p>
          Der Button für die Deaktivierung der Sendereihe wandert in einen eigenen Bereich und
          erhält eine Erklärung zu Bedeutung & Funktionsweise.
        </p>
      </template>
      <ShowJumbotron />
    </UnderConstruction>

    <div class="tw-grid tw-gap-x-6 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3">
      <ShowMetaSimpleTypes />
      <hr class="tw-col-span-full tw-w-full" />
      <ShowMetaArrays />
      <hr class="tw-col-span-full tw-w-full" />
      <ShowMetaImages />
      <ShowMetaOwners />
    </div>

    <hr />

    <p class="tw-text-sm">
      <ATimeEditInfo
        v-if="show.updatedAt"
        :edit-info="{ time: show.updatedAt, author: show.updatedBy }"
        type="modified"
      />
      <br />
      <ATimeEditInfo :edit-info="{ time: show.createdAt, author: show.createdBy }" type="created" />
    </p>
  </div>
</template>

<script lang="ts" setup>
import ShowJumbotron from '../components/shows/Jumbotron.vue'
import ShowMetaSimpleTypes from '../components/shows/MetaSimpleTypes.vue'
import ShowMetaArrays from '../components/shows/MetaArrays.vue'
import ShowMetaOwners from '../components/shows/MetaOwners.vue'
import ShowMetaImages from '../components/shows/MetaImages.vue'
import { useStore } from 'vuex'
import PageHeader from '@/components/PageHeader.vue'
import { useAuthStore, useUserStore } from '@/stores/auth'
import { useI18n } from '@/i18n'
import { Show } from '@/types'
import UnderConstruction from '@/components/UnderConstruction.vue'
import { useBreadcrumbs } from '@/stores/nav'
import ATimeEditInfo from '@/components/generic/ATimeEditInfo.vue'

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

const authStore = useAuthStore()
const userStore = useUserStore()
const store = useStore()
const { t } = useI18n()

useBreadcrumbs(() => [
  { title: t('navigation.shows'), route: { name: 'shows' } },
  { title: props.show.name, route: { name: 'show', params: { showId: props.show.id.toString() } } },
  t('navigation.show.basicData'),
])

store.dispatch('shows/fetchMetaArray', { property: 'types', onlyActive: true })
store.dispatch('shows/fetchMetaArray', {
  property: 'fundingCategories',
  onlyActive: true,
})
store.dispatch('shows/fetchMetaArray', { property: 'categories' })
store.dispatch('shows/fetchMetaArray', { property: 'topics' })
store.dispatch('shows/fetchMetaArray', { property: 'musicFocus' })
store.dispatch('shows/fetchMetaArray', { property: 'languages' })
store.dispatch('shows/fetchMetaArray', { property: 'hosts' })
if (authStore.isSuperuser) {
  userStore.list()
}
</script>