<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="content"
      content-type="html"
      :editable="!props.disabled"
      :placeholder="props.placeholder"
      :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"
      />
    </UEditor>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: string
  disabled?: boolean
  placeholder?: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const content = computed({
  get: () => props.modelValue,
  set: (newValue: string) => {
    emit('update:modelValue', newValue)
  }
})

const toolbarItems = [
  [
    { kind: 'undo', icon: 'i-lucide-undo' },
    { kind: 'redo', icon: 'i-lucide-redo' }
  ],
  [
    { 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: 'bulletList', icon: 'i-lucide-list' },
    { kind: 'orderedList', icon: 'i-lucide-list-ordered' }
  ],
  [{ kind: 'link', icon: 'i-lucide-link' }]
]
</script>
