<script setup lang="ts">
import { computed, h, readonly, ref, watch } from 'vue'
import { FormInst } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { FileAddition } from '@icon-park/vue-next'
import CustomModal from '@/components/custom-modal/custom-modal.vue'

const { t } = useI18n()

export interface KnowledgeFormDataInterface {
  knowledgeType: string
  knowledgeName: string
  knowledgeDesc: string
  knowledgeImportType: string
}

interface Props {
  isShowModal: boolean
  btnLoading: boolean
}

interface Emits {
  (e: 'update:isShowModal', value: boolean): void
  (e: 'confirm', value: KnowledgeFormDataInterface): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const createKnowledgeFormRef = ref<FormInst | null>(null)

const defaultKnowledgeFormData = {
  knowledgeType: 'text',
  knowledgeName: '',
  knowledgeDesc: '',
  knowledgeImportType: 'local-document',
}

const createKnowledgeFormData = ref<KnowledgeFormDataInterface>({ ...defaultKnowledgeFormData })

const createKnowledgeFormDataRules = {
  knowledgeType: [
    { required: true, message: () => t('personal_space_module.knowledge_module.knowledge_type_rule'), trigger: 'blur' },
  ],
  knowledgeName: [
    {
      required: true,
      message: () => t('personal_space_module.knowledge_module.knowledge_name_rule'),
      trigger: 'blur',
    },
  ],
  knowledgeImportType: [
    {
      required: true,
      message: () => t('personal_space_module.knowledge_module.knowledge_import_type_rule'),
      trigger: 'blur',
    },
  ],
}

const knowledgeTypeList = readonly([
  {
    id: 'KJ7rCkq3HNOk',
    icon: 'https://gsst-poe-sit.gz.bcebos.com/data/20241012/1728700558225.png',
    type: 'text',
    name: 'personal_space_module.knowledge_module.knowledge_document_text_type',
  },
])

const importKnowledgeFileList = readonly([
  {
    id: 'ewwBbe9di5Ym',
    icon: () => h(FileAddition, { theme: 'outline', size: '16', fill: '#333' }),
    type: 'local-document',
    title: 'personal_space_module.knowledge_module.import_local_document_knowledge',
    desc: 'personal_space_module.knowledge_module.import_local_document_knowledge_desc',
  },
])

const showModal = computed({
  get() {
    return props.isShowModal
  },
  set(value: boolean) {
    emit('update:isShowModal', value)
  },
})

const isDisabledConfirmBtn = computed(() => {
  return !createKnowledgeFormData.value.knowledgeName
})

watch(
  () => props.isShowModal,
  () => {
    createKnowledgeFormData.value = { ...defaultKnowledgeFormData }
  },
)

function handleNext() {
  createKnowledgeFormRef.value?.validate((errors) => {
    if (!errors) {
      emit('confirm', createKnowledgeFormData.value)
    }
  })
}
</script>

<template>
  <CustomModal
    v-model:is-show="showModal"
    :height="562"
    :width="437"
    :title="t('personal_space_module.knowledge_module.create_knowledge_modal_title')"
    :confirm-btn-text="t('common_module.next_btn_text')"
    :btn-disabled="isDisabledConfirmBtn"
    :btn-loading="btnLoading"
    @confirm="handleNext"
  >
    <template #content>
      <NForm
        ref="createKnowledgeFormRef"
        :model="createKnowledgeFormData"
        :rules="createKnowledgeFormDataRules"
        :label-width="100"
        label-placement="top"
      >
        <NFormItem :show-label="false" path="knowledgeType">
          <div class="flex w-full flex-col">
            <div class="grid grid-cols-3 gap-2">
              <div
                v-for="knowledgeTypeItem in knowledgeTypeList"
                :key="knowledgeTypeItem.id"
                :class="
                  createKnowledgeFormData.knowledgeType === knowledgeTypeItem.type
                    ? 'border-theme-color text-theme-color bg-[#ecedfa]'
                    : 'text-font-color bg-white'
                "
                class="hover:border-theme-color hover:text-theme-color flex h-[66px] cursor-pointer flex-col items-center justify-center rounded-lg border"
              >
                <img :src="knowledgeTypeItem.icon" class="h-6 w-6" />
                <span class="mt-2 text-sm leading-[14px]">{{ t(knowledgeTypeItem.name) }}</span>
              </div>
            </div>
          </div>
        </NFormItem>
        <NFormItem :label="t('common_module.name')" show-require-mark path="knowledgeName">
          <NInput
            v-model:value="createKnowledgeFormData.knowledgeName"
            maxlength="15"
            show-count
            type="text"
            :placeholder="t('personal_space_module.knowledge_module.knowledge_name_input_placeholder')"
          />
        </NFormItem>
        <NFormItem :label="t('common_module.desc')">
          <NInput
            v-model:value="createKnowledgeFormData.knowledgeDesc"
            maxlength="500"
            show-count
            type="textarea"
            :placeholder="t('personal_space_module.knowledge_module.knowledge_desc_input_placeholder')"
          />
        </NFormItem>
        <NFormItem
          :label="t('personal_space_module.knowledge_module.knowledge_import_type_label')"
          :show-require-mark="false"
          path="knowledgeImportType"
        >
          <div class="grid w-full grid-cols-2 gap-2">
            <div
              v-for="importKnowledgeFileItem in importKnowledgeFileList"
              :key="importKnowledgeFileItem.id"
              class="border-inactive-border-color flex h-[64px] flex-col items-start justify-center rounded-lg border bg-[#FAFAFA] px-[14px]"
            >
              <div class="flex items-center">
                <component :is="importKnowledgeFileItem.icon()" />
                <span class="text-font-color ml-1 line-clamp-1">{{ t(importKnowledgeFileItem.title) }}</span>
              </div>

              <NPopover trigger="hover">
                <template #trigger>
                  <span class="text-gray-font-color mt-1.5 line-clamp-1 text-xs">
                    {{ t(importKnowledgeFileItem.desc) }}
                  </span>
                </template>
                <span>{{ t(importKnowledgeFileItem.desc) }}</span>
              </NPopover>
            </div>
          </div>
        </NFormItem>
      </NForm>
    </template>
  </CustomModal>
</template>
