<script setup lang="ts">
import { computed, nextTick, useTemplateRef, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useElementVisibility } from '@vueuse/core'
import { useScroll } from '@/composables/useScroll'
import { PersonalAppConfigState } from '@/store/types/personal-app-config'
import MessageItem from './message-item.vue'
import ContinueQuestion from './continue-question.vue'

interface Props {
  messageList: Map<string, ConversationMessageItem>
  agentApplicationConfig: PersonalAppConfigState
  continuousQuestionStatus: 'default' | 'close'
  isAnswerResponseLoading: boolean
  createContinueQuestionsException: boolean
  isAnswerResponseInterrupt?: boolean
}

const props = defineProps<Props>()

defineEmits<{
  audioPlay: [messageItem: ConversationMessageItem]
  audioPause: []
}>()

const { t } = useI18n()

const { scrollRef, scrollToBottom } = useScroll()
const backBottomBtnFlagRef = useTemplateRef<HTMLDivElement | null>('backBottomBtnFlagRef')
const isNotShowBackBottomBtn = useElementVisibility(backBottomBtnFlagRef)

const continuousQuestionList = defineModel<string[]>('continuousQuestionList', { required: true })

const isShowContinueQuestion = computed(() => {
  return (
    props.continuousQuestionStatus === 'default' &&
    props.messageList.size > 1 &&
    !props.isAnswerResponseLoading &&
    !props.createContinueQuestionsException &&
    !props.isAnswerResponseInterrupt
  )
})

watch(
  () => props.messageList.size,
  () => {
    clickBackBottom()
  },
)

defineExpose({
  scrollToBottom: handleScrollToBottom,
})

function clickBackBottom() {
  scrollToBottom()
}

function handleScrollToBottom() {
  nextTick(() => {
    isNotShowBackBottomBtn.value && scrollToBottom()
  })
}
</script>

<template>
  <main ref="scrollRef" class="message-list-container">
    <div class="relative">
      <MessageItem
        v-for="[key, messageItem] in messageList"
        :key="key"
        :role="messageItem.role"
        :message-item="messageItem"
        :agent-application-config="agentApplicationConfig"
        @audio-play="() => $emit('audioPlay', messageItem)"
        @audio-pause="() => $emit('audioPause')"
      />

      <p v-show="isAnswerResponseLoading" class="answer-response-loading-text">
        {{ t('common_module.dialogue_module.do_not_exit_page') }}
      </p>

      <div v-show="isShowContinueQuestion">
        <ContinueQuestion v-model:continuous-question-list="continuousQuestionList" :type="'continuous'" />
      </div>

      <div ref="backBottomBtnFlagRef" class="back-bottom-flag"></div>
    </div>

    <Transition name="back-bottom-btn" mode="out-in">
      <div v-show="!isNotShowBackBottomBtn" class="back-bottom-btn" @click.stop="clickBackBottom">
        <i class="iconfont icon-huidaodibu back-bottom-btn-icon" />
      </div>
    </Transition>
  </main>
</template>

<style lang="scss" scoped>
.message-list-container {
  @apply h-full overflow-y-auto overflow-x-hidden px-[20px];

  .answer-response-loading-text {
    @apply my-[7px] ml-[4px] text-[12px] text-[#84868c];
  }

  .back-bottom-flag {
    @apply -z-1 absolute bottom-0 h-[70px] w-full;
  }

  .back-bottom-btn {
    @apply flex-center hover:text-theme-color absolute bottom-[20px] right-[20px] h-[24px] w-[24px] cursor-pointer rounded-full bg-white shadow-[0_0_0_1px_#ededed];

    &-icon {
      @apply text-[14px];
    }
  }
}

.back-bottom-btn-enter-active,
.back-bottom-btn-leave-active {
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
  transition-property: opacity;
}

.back-bottom-btn-enter-from,
.back-bottom-btn-leave-to {
  opacity: 0;
}
</style>
