<template>
  <div class="flex-1 overflow-y-auto rounded-lg md:border md:p-5">
    <div class="space-y-2">
      <div class="pt-3 sm:pt-0">
        <p class="text-sm text-foreground">Documents description</p>
      </div>

      <Alert variant="info" class="mb-1 py-2 px-2" collapsible default-collapsed>
        <i class="dku-icon-info-circle-outline-16"></i>
        <AlertTitle
          >Help the AI understand what kinds of information this document set is
          providing</AlertTitle
        >
        <AlertDescription>
          Tips for effective instructions
          <br />
          • Describe in details the content of your documents
          <br />
          • Keep your description up to date as you add/remove documents
          <br />
          • Explain when to use information provided by these documents
        </AlertDescription>
      </Alert>

      <Textarea
        v-model="docRetrievalPromptValue"
        @input="handleInput"
        placeholder="Description of your documents"
        class="w-full !border !border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm py-2 px-3 resize-y placeholder-gray-400 placeholder-opacity-50 min-h-[120px] md:min-h-[200px]"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
import { Textarea } from '@/components/ui/textarea'

// Props
const props = defineProps<{
  docRetrievalPrompt: string
}>()

// Emits
const emit = defineEmits<{
  (e: 'update:doc-retrieval-prompt', prompt: string): void
}>()

// Computed property for v-model
const docRetrievalPromptValue = computed({
  get: () => props.docRetrievalPrompt,
  set: (value: string) => emit('update:doc-retrieval-prompt', value),
})

// Methods
function handleInput(event: Event) {
  emit('update:doc-retrieval-prompt', (event.target as HTMLTextAreaElement).value)
}
</script>
