<template>
  <FormTable class="tw-max-w-3xl">
    <FormGroup
      v-slot="attrs"
      :label="t('noteEditor.title')"
      :errors="title.errors"
      :is-saving="title.isSaving"
    >
      <input
        v-model="title.value"
        :placeholder="t('noteEditor.titlePlaceholder')"
        required
        v-bind="attrs"
        @blur="title.save()"
      />
      <p v-if="note.slug" class="tw-text-xs tw-text-gray-400 tw-mt-1 tw-mb-0">
        {{ t('slug') }}: {{ note.slug }}
      </p>
    </FormGroup>

    <FormGroup
      v-slot="{ id }"
      :label="t('noteEditor.summary')"
      :errors="summary.errors"
      :is-saving="summary.isSaving"
      custom-control
    >
      <AHTMLEditor
        :id="id"
        v-model="summary.value"
        :placeholder="t('noteEditor.summaryPlaceholder')"
        @blur="summary.save()"
      />
    </FormGroup>

    <FormGroup
      v-slot="{ id }"
      :label="t('noteEditor.content')"
      :errors="content.errors"
      :is-saving="content.isSaving"
      custom-control
    >
      <AHTMLEditor
        :id="id"
        v-model="content.value"
        :placeholder="t('noteEditor.contentPlaceholder')"
        @blur="content.save()"
      />
    </FormGroup>

    <FormGroup
      :label="t('noteEditor.image')"
      :errors="imageId.errors"
      :is-saving="imageId.isSaving"
      custom-control
    >
      <ImagePicker v-model="imageId.value" class="tw-flex-none tw-w-min" />
    </FormGroup>

    <FormGroup
      :label="t('noteEditor.contributors')"
      :errors="contributors.errors"
      :is-saving="contributors.isSaving"
    >
      <ComboBoxSimple v-model="contributors.value" :choices="contributors.choices" />
    </FormGroup>

    <FormGroup
      v-slot="{ disabled }"
      :label="t('noteEditor.topics')"
      :errors="topics.errors"
      :is-saving="topics.isSaving"
      edit-permissions="program.edit__note__topic"
    >
      <ComboBoxSimple v-model="topics.value" :choices="topics.choices" :disabled="disabled" />
    </FormGroup>

    <FormGroup
      v-slot="{ disabled }"
      :label="t('noteEditor.languages')"
      :errors="languages.errors"
      :is-saving="languages.isSaving"
      edit-permissions="program.edit__note__language"
    >
      <ComboBoxSimple v-model="languages.value" :choices="languages.choices" :disabled="disabled" />
    </FormGroup>

    <FormGroup :label="t('noteEditor.tags')" :errors="tags.errors" :is-saving="tags.isSaving">
      <TagInput v-model="tags.value" />
    </FormGroup>

    <FormGroup
      :label="t('noteEditor.links')"
      :is-saving="links.isSaving"
      :errors="links.errors.forField('links', '')"
      :has-error="links.errors.length > 0"
      custom-control
    >
      <ALinkCollectionEditor
        v-model="links.value"
        :error-lists="links.errors.siblings('links')"
        allow-add
        @save="links.save()"
      />
    </FormGroup>
  </FormTable>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

import { useI18n } from '@/i18n'
import { Note, Show, TimeSlot } from '@/types'
import { useHostStore, useLanguageStore, useNoteStore, useTopicStore } from '@/stores'
import FormGroup from '@/components/generic/FormGroup.vue'
import ImagePicker from '@/components/images/ImagePicker.vue'
import TagInput from '@/components/generic/TagInput.vue'
import ComboBoxSimple from '@/components/ComboBoxSimple.vue'
import { useAPIObjectFieldCopy, useRelationList } from '@/form'
import FormTable from '@/components/generic/FormTable.vue'
import ALinkCollectionEditor from '@/components/generic/ALinkCollectionEditor.vue'
import AHTMLEditor from '@/components/generic/AHTMLEditor.vue'

defineOptions({ compatConfig: { MODE: 3 } })

const props = defineProps<{
  timeslot: TimeSlot
  show: Show
  note: Note
}>()
const { t } = useI18n()
const noteStore = useNoteStore()
const hostStore = useHostStore()
const languageStore = useLanguageStore()
const topicStore = useTopicStore()
const note = computed(() => props.note)

const title = useAPIObjectFieldCopy(noteStore, note, 'title', { debounce: 2 })
const summary = useAPIObjectFieldCopy(noteStore, note, 'summary', { noAutoSave: true })
const content = useAPIObjectFieldCopy(noteStore, note, 'content', { noAutoSave: true })
const tags = useAPIObjectFieldCopy(noteStore, note, 'tags')
const imageId = useAPIObjectFieldCopy(noteStore, note, 'imageId', { debounce: 0 })
const links = useAPIObjectFieldCopy(noteStore, note, 'links', { debounce: 2 })
const contributors = useRelationList(noteStore, note, 'contributorIds', hostStore)
const languages = useRelationList(noteStore, note, 'languageIds', languageStore)
const topics = useRelationList(noteStore, note, 'topicIds', topicStore)
</script>