<template>
  <div class="bg-white dark:bg-white rounded-md border border-gray-200 dark:border-gray-200 overflow-hidden">
    <UEditor
      v-slot="{ editor }"
      v-model="htmlContent"
      content-type="html"
      :editable="!props.disabled"
      :placeholder="t('applicationForms.formElements.richTextPlaceholder')"
      :ui="{
        content: 'bg-white dark:bg-white',
        base: 'min-h-[200px] p-3 bg-white dark:bg-white'
      }"
      class="w-full"
    >
      <UEditorToolbar
        :editor="editor"
        :items="toolbarItems"
        class="border-b border-muted sticky top-0 inset-x-0 px-3 py-2 z-50 bg-default overflow-x-auto"
      />
      <UEditorSuggestionMenu :editor="editor" :items="suggestionItems" />
      <UEditorMentionMenu :editor="editor" :items="mentionItems" />
      <UEditorDragHandle :editor="editor" />
    </UEditor>
  </div>
</template>

<script setup lang="ts">
import { EmployeeDataCategory, ProcessingPurpose, type FormOptionDto } from '~~/.api-client'

const { t } = useI18n()

const props = defineProps<{
  formOptions: FormOptionDto[]
  disabled?: boolean
}>()

const emit = defineEmits<{
  (e: 'update:formOptions', value: FormOptionDto[]): void
}>()

const htmlContent = computed({
  get: () => props.formOptions[0]?.value ?? '',
  set: (newValue: string) => {
    const updatedOptions: FormOptionDto[] = [...props.formOptions]
    if (updatedOptions.length === 0) {
      const createdOption: FormOptionDto = {
        value: newValue,
        label: '',
        processingPurpose: ProcessingPurpose.None,
        employeeDataCategory: EmployeeDataCategory.None
      }
      updatedOptions.push(createdOption)
    } else {
      const firstOption = updatedOptions[0]!
      updatedOptions[0] = { ...firstOption, value: newValue }
    }
    emit('update:formOptions', updatedOptions)
  }
})

const toolbarItems = [
  [
    { kind: 'undo', icon: 'i-lucide-undo' },
    { kind: 'redo', icon: 'i-lucide-redo' }
  ],
  [
    { kind: 'heading', level: 1, icon: 'i-lucide-heading-1', label: 'H1' },
    { kind: 'heading', level: 2, icon: 'i-lucide-heading-2', label: 'H2' },
    { kind: 'heading', level: 3, icon: 'i-lucide-heading-3', label: 'H3' }
  ],
  [
    { kind: 'mark', mark: 'bold', icon: 'i-lucide-bold' },
    { kind: 'mark', mark: 'italic', icon: 'i-lucide-italic' },
    { kind: 'mark', mark: 'underline', icon: 'i-lucide-underline' },
    { kind: 'mark', mark: 'strike', icon: 'i-lucide-strikethrough' }
  ],
  [
    { kind: 'bulletList', icon: 'i-lucide-list' },
    { kind: 'orderedList', icon: 'i-lucide-list-ordered' }
  ],
  [
    { kind: 'blockquote', icon: 'i-lucide-quote' },
    { kind: 'codeBlock', icon: 'i-lucide-code' }
  ],
  [{ kind: 'link', icon: 'i-lucide-link' }]
]

const suggestionItems = [
  [
    { kind: 'heading', level: 1, label: 'Überschrift 1', icon: 'i-lucide-heading-1' },
    { kind: 'heading', level: 2, label: 'Überschrift 2', icon: 'i-lucide-heading-2' },
    { kind: 'heading', level: 3, label: 'Überschrift 3', icon: 'i-lucide-heading-3' }
  ],
  [
    { kind: 'bulletList', label: 'Aufzählung', icon: 'i-lucide-list' },
    { kind: 'orderedList', label: 'Nummerierung', icon: 'i-lucide-list-ordered' }
  ],
  [
    { kind: 'blockquote', label: 'Zitat', icon: 'i-lucide-quote' },
    { kind: 'codeBlock', label: 'Code Block', icon: 'i-lucide-code' },
    { kind: 'horizontalRule', label: 'Trennlinie', icon: 'i-lucide-separator-horizontal' }
  ]
]

const mentionItems: Array<{ label: string; avatar?: { src: string } }> = []
</script>
