<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { Left, Plus, Logout } from '@icon-park/vue-next'

interface Props {
  agentTitle: string
  agentDesc: string
  totalNum: number
  isAnswerResponseWait: boolean
}

const { t } = useI18n()

const props = defineProps<Props>()

const isDisabledAddModelBtn = computed(() => {
  return props.totalNum >= 3 || props.isAnswerResponseWait
})

const emit = defineEmits<{
  back: []
  addModelDialogue: []
}>()

function handleBack() {
  emit('back')
}

function handleAddModelDialogue() {
  emit('addModelDialogue')
}
</script>

<template>
  <header class="mb-[18px] flex items-end justify-between">
    <div>
      <div class="flex items-center">
        <div
          class="rounded-theme hover:bg-hover-background-color mr-0.5 flex h-7 w-7 cursor-pointer items-center justify-center"
          @click="handleBack"
        >
          <Left theme="outline" size="20" fill="#333" class="mt-0.5" />
        </div>

        <span class="text-font-color font-600 line-clamp-1 break-all text-lg">
          {{ agentTitle || '--' }}
        </span>
      </div>

      <span class="text-gray-font-color ml-7.5 mt-1.5 line-clamp-1 break-all">
        {{ agentDesc || t('personal_space_module.agent_module.agent_setting_module.missing_agent_desc_message') }}
      </span>
    </div>

    <div class="flex gap-5">
      <NButton
        type="primary"
        :bordered="false"
        class="px-4!"
        :disabled="isDisabledAddModelBtn"
        @click="handleAddModelDialogue"
      >
        <Plus theme="outline" size="18" fill="#fff" :stroke-width="3" />
        <span class="ml-[5px]">{{ t('multi_model_dialogue_module.add_model') }}{{ totalNum }}/3</span>
      </NButton>
      <NButton type="info" @click="handleBack">
        <Logout theme="outline" size="18" fill="#575FFF" :stroke-width="3" />
        <span class="ml-[5px]">{{ t('multi_model_dialogue_module.quit_test') }}</span>
      </NButton>
    </div>
  </header>
</template>
