<script setup lang="ts">
import { debounce } from 'lodash-es'
import { nanoid } from 'nanoid'
import { computed, inject, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { Emitter } from 'mitt'
import { fetchRecommendQuestionList } from '@/apis/home-agent'

interface Props {
  type: 'continuous' | 'featured'
}

defineProps<Props>()

const { t } = useI18n()

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

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

const promptChangeBtnStatus = ref<'normal' | 'loading' | 'failed'>('normal')

const recommendQuestionList = computed(() => {
  if (continuousQuestionList.value.length === 0) {
    return []
  }

  return continuousQuestionList.value.map((item) => {
    return {
      id: nanoid(),
      content: item,
    }
  })
})

function getRecommendQuestionList() {
  return fetchRecommendQuestionList<string[]>().then((res) => {
    continuousQuestionList.value = res.data
  })
}

const handleRecommendQuestionListUpdate = debounce(
  () => {
    if (promptChangeBtnStatus.value === 'loading') {
      return
    }

    promptChangeBtnStatus.value = 'loading'

    getRecommendQuestionList()
      .then(() => {
        promptChangeBtnStatus.value = 'normal'
      })
      .catch(() => {
        promptChangeBtnStatus.value = 'failed'
      })
  },
  700,
  { leading: true, trailing: false },
)

function handleSelectContinueQuestion(continueQuestion: string) {
  emitter?.emit('selectQuestion', continueQuestion)
}
</script>
<template>
  <h3 class="continue-question-title">
    {{
      type === 'featured'
        ? t('common_module.recommended_questions') + '：'
        : t('common_module.dialogue_module.continue_question_message')
    }}
  </h3>

  <ul class="continue-question-wrapper">
    <template v-if="continuousQuestionList.length && promptChangeBtnStatus !== 'loading'">
      <li
        v-for="questionItem in recommendQuestionList"
        :key="questionItem.id"
        class="question-item"
        @click="handleSelectContinueQuestion(questionItem.content)"
      >
        {{ questionItem.content }}
      </li>
    </template>

    <template v-else>
      <n-skeleton class="question-item-skeleton" width="52%" round />
      <n-skeleton class="question-item-skeleton" width="72%" round />
      <n-skeleton class="question-item-skeleton" width="70%" round />
    </template>

    <li class="recommend-question-change-wrapper">
      <span
        class="recommend-question-change-container"
        :class="{
          'hover:text-[#096EE0]': promptChangeBtnStatus !== 'loading',
          'cursor-not-allowed': promptChangeBtnStatus === 'loading',
          'text-[#BDBDBD]': promptChangeBtnStatus === 'loading',
        }"
        @click="handleRecommendQuestionListUpdate"
      >
        <i
          class="iconfont icon-huanyihuan recommend-question-change-icon"
          :class="{ 'group-active:rotate-360': promptChangeBtnStatus !== 'loading' }"
        ></i>
        <span>
          {{ promptChangeBtnStatus === 'failed' ? t('common_module.retry') : t('common_module.exchange') }}
        </span>
      </span>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.continue-question-title {
  @apply mt-[15px] text-[12px] text-[#999];
}

.continue-question-wrapper {
  @apply w-full select-none;

  .question-item {
    @apply mt-[10px] w-fit cursor-pointer rounded-[10px] border border-[#d4d6d9] bg-[#ffffff80] px-[12px] py-[10px] text-[12px] hover:opacity-80;
  }

  .question-item-skeleton {
    @apply mt-[10px] h-[40px];
  }

  .recommend-question-change-wrapper {
    @apply mt-[10px] pl-[16px] text-[12px];

    .recommend-question-change-container {
      @apply group cursor-pointer text-[#0B7DFF] transition;

      .recommend-question-change-icon {
        @apply mr-[2px] inline-block text-[11px] transition-[rotate] duration-150 ease-in-out;
      }
    }
  }
}
</style>
