<script setup lang="ts">
import { computed, h } from 'vue'
import { useI18n } from 'vue-i18n'
import { Help, Down, RightOne } from '@icon-park/vue-next'
import { PersonalAppConfigState } from '@/store/types/personal-app-config'

const { t } = useI18n()

const emit = defineEmits<{
  generatePreamble: []
  generateFeaturedQuestions: []
}>()

const commConfigExpandedNames = defineModel<string[]>('commConfigExpandedNames', { required: true })
const commConfig = defineModel<PersonalAppConfigState['commConfig']>('commConfig', { required: true })
const generatePreambleLoading = defineModel<boolean>('generatePreambleLoading', { required: true })
const generateFeaturedQuestionsLoading = defineModel<boolean>('generateFeaturedQuestionsLoading', { required: true })

const questionSettingOptions = [
  {
    label: () =>
      h(
        'span',
        {},
        t('personal_space_module.agent_module.agent_setting_module.agent_config_module.continuous_question_default'),
      ),
    value: 'default',
    style: { fontSize: '12px' },
  },
  {
    label: () =>
      h(
        'span',
        {},
        t('personal_space_module.agent_module.agent_setting_module.agent_config_module.continuous_question_close'),
      ),
    value: 'close',
    style: { fontSize: '12px' },
  },
]

const continuousQuestionStatusText = computed(() => {
  return commConfig.value.continuousQuestionStatus === 'default'
    ? t('personal_space_module.agent_module.agent_setting_module.agent_config_module.continuous_question_default')
    : t('personal_space_module.agent_module.agent_setting_module.agent_config_module.continuous_question_close')
})

function handleUpdateCommConfigExpandedNames(expandedNames: string[]) {
  commConfigExpandedNames.value = expandedNames
}

function handleAIGeneratePreamble() {
  emit('generatePreamble')
}

function handleAIGenerateFeaturedQuestions() {
  emit('generateFeaturedQuestions')
}
</script>

<template>
  <section class="border-b border-[#e8e9eb] px-5">
    <div class="pt-4">
      <h2 class="mb-3 text-[#84868c]">
        {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.dialogue') }}
      </h2>
      <NCollapse
        :expanded-names="commConfigExpandedNames"
        :trigger-areas="['main', 'arrow']"
        @update:expanded-names="handleUpdateCommConfigExpandedNames"
      >
        <template #arrow>
          <RightOne theme="multi-color" size="17" :fill="['#333', '#333', '#333', '#333']" />
        </template>
        <NCollapseItem
          :title="t('personal_space_module.agent_module.agent_setting_module.agent_config_module.preamble')"
          name="preamble"
          class="my-[13px]!"
        >
          <template #header-extra>
            <NTooltip trigger="hover">
              <template #trigger>
                <div
                  class="h-4 w-4 bg-[length:100%_100%]"
                  :class="
                    generatePreambleLoading
                      ? 'bg-[url(@/assets/images/loading.gif)]'
                      : 'bg-[url(@/assets/svgs/star.svg)]'
                  "
                  @click="handleAIGeneratePreamble"
                />
              </template>
              {{ t('common_module.ai_generate') }}
            </NTooltip>
          </template>
          <NInput
            v-model:value="commConfig.preamble"
            type="textarea"
            :rows="5"
            :disabled="generatePreambleLoading"
            class="text-xs! rounded-md!"
            :placeholder="
              t(
                'personal_space_module.agent_module.agent_setting_module.agent_config_module.preamble_input_placeholder',
              )
            "
          />
        </NCollapseItem>

        <NCollapseItem
          :title="t('personal_space_module.agent_module.agent_setting_module.agent_config_module.featured_questions')"
          name="featuredQuestions"
          class="my-[13px]!"
        >
          <template #header-extra>
            <NTooltip trigger="hover">
              <template #trigger>
                <div
                  class="h-4 w-4 bg-[length:100%_100%]"
                  :class="
                    generateFeaturedQuestionsLoading
                      ? 'bg-[url(@/assets/images/loading.gif)]'
                      : 'bg-[url(@/assets/svgs/star.svg)]'
                  "
                  @click="handleAIGenerateFeaturedQuestions"
                />
              </template>
              {{ t('common_module.ai_generate') }}
            </NTooltip>
          </template>
          <NDynamicInput
            v-model:value="commConfig.featuredQuestions"
            :placeholder="
              t(
                'personal_space_module.agent_module.agent_setting_module.agent_config_module.featured_questions_input_placeholder',
              )
            "
            class="rounded-md"
            :min="1"
            :max="3"
            :disabled="generateFeaturedQuestionsLoading"
          >
            <template #create-button-default> {{ t('common_module.add') }} </template>
          </NDynamicInput>
        </NCollapseItem>

        <NCollapseItem name="continuousQuestion" class="my-[13px]!">
          <template #header>
            <div class="flex items-center">
              <span>
                {{
                  t('personal_space_module.agent_module.agent_setting_module.agent_config_module.continuous_question')
                }}
              </span>
              <NPopover trigger="hover">
                <template #trigger>
                  <Help
                    theme="outline"
                    size="15"
                    fill="#333"
                    :stroke-width="3"
                    class="ml-1 cursor-pointer text-base text-[#999] outline-none"
                  />
                </template>
                <span class="text-xs">
                  {{
                    t(
                      'personal_space_module.agent_module.agent_setting_module.agent_config_module.continuous_question_popover_message',
                    )
                  }}
                </span>
              </NPopover>
            </div>
          </template>

          <template #header-extra>
            <NPopselect
              v-model:value="commConfig.continuousQuestionStatus"
              :options="questionSettingOptions"
              trigger="click"
              content-class="text-xs"
            >
              <div class="text-theme-color flex cursor-pointer items-center justify-between text-xs">
                <span> {{ continuousQuestionStatusText }}</span>
                <Down theme="outline" size="16" class="text-theme-color ml-1 text-base" />
              </div>
            </NPopselect>
          </template>

          <div>
            <span v-show="commConfig.continuousQuestionStatus === 'default'" class="text-xs text-[#84868c]">
              {{
                t(
                  'personal_space_module.agent_module.agent_setting_module.agent_config_module.continuous_question_default_desc',
                )
              }}
            </span>

            <span v-show="commConfig.continuousQuestionStatus === 'close'" class="text-xs text-[#84868c]">
              {{
                t(
                  'personal_space_module.agent_module.agent_setting_module.agent_config_module.continuous_question_close_desc',
                )
              }}
            </span>
          </div>
        </NCollapseItem>
      </NCollapse>
    </div>
  </section>
</template>
