<script setup lang="ts">
import { computed, inject } from 'vue'
import { Emitter } from 'mitt'
import { PersonalAppConfigState } from '@/store/types/personal-app-config'

interface Props {
  agentApplicationConfig: PersonalAppConfigState
}

const props = defineProps<Props>()

const agentApplicationConfig = computed(() => props.agentApplicationConfig)

const emitter = inject<Emitter<MittEvents>>('emitter')

const agentAvatar = computed(() => {
  return (
    agentApplicationConfig.value.baseInfo.agentAvatar ||
    'https://gsst-poe-sit.gz.bcebos.com/data/20240911/1726041369632.webp'
  )
})

function handleSelectFeaturedQuestion(featuredQuestion: string) {
  emitter?.emit('selectQuestion', featuredQuestion)
}
</script>

<template>
  <div class="flex w-full flex-1 flex-col px-5">
    <div class="mb-5 mt-[60px] flex w-full justify-center sm:pt-[120px]">
      <img :src="agentAvatar" class="h-[72px] w-[72px] rounded-xl border" />
    </div>

    <div class="flex flex-col items-center justify-center">
      <p class="font-500 mb-4 line-clamp-1 text-2xl text-[#151b26]">
        {{ agentApplicationConfig.baseInfo.agentTitle }}
      </p>

      <div class="flex flex-col items-start justify-center">
        <p
          v-show="agentApplicationConfig.commConfig.preamble"
          class="mb-6 select-none break-all rounded-xl bg-[#e7ecf2] px-[16px] py-[12px]"
        >
          {{ agentApplicationConfig.commConfig.preamble }}
        </p>

        <ul class="flex max-w-full flex-col items-start justify-center gap-3 overflow-hidden">
          <li v-for="(featuredQuestionItem, index) in agentApplicationConfig.commConfig.featuredQuestions" :key="index">
            <div
              v-show="featuredQuestionItem"
              class="w-full cursor-pointer rounded-xl border border-[#d4d6d9] bg-[#ffffff80] px-[14px] py-[11px] hover:opacity-80"
              @click="handleSelectFeaturedQuestion(featuredQuestionItem)"
            >
              <span class="break-all">{{ featuredQuestionItem }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
