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

    <div class="tw-grid tw-gap-x-6 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3">
      <FormGroup
        v-slot="attrs"
        :label="t('show.fields.name')"
        :is-saving="name.isSaving"
        :errors="name.errors"
        class="tw-col-span-2"
      >
        <input v-bind="attrs" v-model="name.value" type="text" @blur="name.save" />
      </FormGroup>

      <FormGroup
        v-slot="attrs"
        :label="t('show.fields.shortDescription')"
        :is-saving="shortDescription.isSaving"
        :errors="shortDescription.errors"
        class="tw-col-span-2"
      >
        <textarea
          ref="shortDescriptionEl"
          v-bind="attrs"
          v-model="shortDescription.value"
          class="tw-min-h-[4rem] tw-resize-none"
          @blur="shortDescription.save"
        />
      </FormGroup>

      <FormGroup
        v-slot="attrs"
        :label="t('show.fields.description')"
        :is-saving="description.isSaving"
        :errors="description.errors"
        class="tw-col-span-2"
      >
        <textarea
          ref="descriptionEl"
          v-bind="attrs"
          v-model="description.value"
          class="tw-min-h-[6rem] tw-resize-none"
          @blur="description.save"
        />
      </FormGroup>

      <hr class="tw-col-span-full tw-w-full" />

      <ShowMetaSimpleTypes :show="show" />
      <hr class="tw-col-span-full tw-w-full" />
      <ShowMetaArrays :show="show" />
      <hr class="tw-col-span-full tw-w-full" />
      <ShowMetaImages :show="show" />
      <ShowMetaOwners :show="show" />
    </div>

    <hr />

    <AHousekeeping :show="show" />

    <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 { useTextareaAutosize } from '@vueuse/core'
import { computed, toRef } from 'vue'

import { useI18n } from '@/i18n'
import { Show } from '@/types'
import { useAPIObjectFieldCopy } from '@/form'
import { useShowStore } from '@/stores'
import { useBreadcrumbs } from '@/stores/nav'

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 PageHeader from '@/components/PageHeader.vue'
import ATimeEditInfo from '@/components/generic/ATimeEditInfo.vue'
import FormGroup from '@/components/generic/FormGroup.vue'
import AHousekeeping from '@/components/shows/AHousekeeping.vue'

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

const { t } = useI18n()
const showStore = useShowStore()

const show = computed(() => props.show)
const name = useAPIObjectFieldCopy(showStore, show, 'name', { debounce: 2 })
const shortDescription = useAPIObjectFieldCopy(showStore, show, 'shortDescription', { debounce: 2 })
const description = useAPIObjectFieldCopy(showStore, show, 'description', { debounce: 2 })

const { textarea: descriptionEl } = useTextareaAutosize({
  input: toRef(description, 'value'),
})
const { textarea: shortDescriptionEl } = useTextareaAutosize({
  input: toRef(shortDescription, 'value'),
})

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'),
])
</script>