<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { KnowledgeChunkItem } from '../types.d'

interface Props {
  chunkItem: KnowledgeChunkItem
  totalChunk: number
}

const { t } = useI18n()

defineProps<Props>()

const emit = defineEmits<{
  (e: 'edit', value: KnowledgeChunkItem): void
  (e: 'upAddChunk', chunkSort: number): void
  (e: 'downAddChunk', chunkSort: number): void
  (e: 'delete', chunkRelationId: string): void
  (e: 'updateOpen', value: KnowledgeChunkItem): void
}>()

const isShowKnowledgeChunkAction = ref(false)
</script>

<template>
  <div class="group w-full rounded-[20px] bg-white px-5 py-[18px]" @mouseleave="isShowKnowledgeChunkAction = false">
    <div
      class="text-gray-font-color border-inactive-border-color flex h-10 select-none items-center justify-between border-b pb-[14px] text-[13px]"
    >
      <span>{{ chunkItem.chunkSort }} / {{ totalChunk }}</span>

      <div
        class="hidden items-center gap-[10px] group-hover:flex"
        :class="isShowKnowledgeChunkAction ? 'flex' : 'hidden group-hover:flex'"
      >
        <n-popover trigger="hover">
          <template #trigger>
            <i
              class="iconfont icon-edit-document hover:text-font-color hover:bg-background-color flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-sm"
              @click="emit('edit', chunkItem)"
            />
          </template>
          <span> {{ t('common_module.data_table_module.edit') }}</span>
        </n-popover>

        <n-popover trigger="hover">
          <template #trigger>
            <i
              class="iconfont icon-add-chunk-up hover:text-font-color hover:bg-background-color flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-sm"
              @click="emit('upAddChunk', chunkItem.chunkSort)"
            />
          </template>
          <span> {{ t('personal_space_module.knowledge_module.add_chunk_up_message') }} </span>
        </n-popover>

        <n-popover trigger="hover">
          <template #trigger>
            <i
              class="iconfont icon-add-chunk-up hover:text-font-color hover:bg-background-color flex h-6 w-6 rotate-180 cursor-pointer items-center justify-center rounded-full text-sm"
              @click="emit('downAddChunk', chunkItem.chunkSort + 1)"
            />
          </template>
          <span> {{ t('personal_space_module.knowledge_module.add_chunk_down_message') }} </span>
        </n-popover>

        <n-popover trigger="hover">
          <template #trigger>
            <i
              class="iconfont icon-delete hover:text-font-color hover:bg-background-color flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-sm"
              @click="emit('delete', chunkItem.chunkRelationId)"
            />
          </template>
          <span> {{ t('common_module.data_table_module.delete') }}</span>
        </n-popover>

        <n-switch :value="chunkItem.isOpen === 'Y'" @update:value="emit('updateOpen', chunkItem)" />
      </div>
    </div>

    <div class="text-font-color mt-[14px] whitespace-pre-wrap">
      {{ chunkItem.chunkContent }}
    </div>
  </div>
</template>
