<template>
  <div class="right-topic-list flex flex-col w-full h-full min-h-0">
    <div class="head-box box-border flex items-center justify-between p-3.5 mb-3.5 bg-gray-100 rounded-md">
      <span class="title text-16px font-medium text-gray-600 select-none">特殊区域</span>
      <n-button :disabled="!currBookPage" type="primary" @click="addTopic">
        <template #icon><icon-solar-question-circle-outline /></template>
        添加区域
      </n-button>
    </div>
    <div class="flex flex-1 flex-col w-full h-full max-h-full bg-gray-50 rounded-10px">
      <n-scrollbar
        v-if="currBookPage && currBookPageLayout.length > 0"
        class="flex-1 w-full h-full max-h-full bg-gray-50 rounded-10px"
        content-style="height: auto; min-height: 100%"
      >
        <ul class="list p-3.5">
          <li v-for="(topicInfo, topicInfoIndex) in currBookPageLayout" :key="topicInfoIndex" class="mb-2.5">
            <right-topic-item :topicInfo="topicInfo" :currBookPage="currBookPage" @edit-topic="editTopic"></right-topic-item>
          </li>
        </ul>
      </n-scrollbar>
      <div v-else-if="!currBookPage" class="flex items-center justify-center h-full min-h-full">
        <n-empty description="请在目录中选择页码" class="bg-white p-4 rounded" />
      </div>
      <div v-else-if="currBookPageLayout.length <= 0" class="flex items-center justify-center h-full min-h-full">
        <n-empty description="暂无数据" class="bg-white p-4 rounded" />
      </div>
    </div>
    <add-topic-form-bubble ref="addTopicFormBubbleRef"></add-topic-form-bubble>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, useTemplateRef } from 'vue';
import type { PropType } from 'vue';
import { useMessage } from 'naive-ui';
import RightTopicItem from './components/right-topic-item.vue';
import type { CurrBookPageAllInfo, TopicInfo } from '../../types';
import AddTopicFormBubble from './components/add-topic-form-bubble.vue';
import { $mitt, open_book_topic_edit } from '@/utils/event-bus';

const props = defineProps({
  /** 当前页码信息 */
  currBookPage: { type: Object as PropType<CurrBookPageAllInfo>, default: undefined },
});

const message = useMessage();

onMounted(() => {
  $mitt.on(open_book_topic_edit, (data: { questionId: number; event: MouseEvent }) => {
    const topicInfo = currBookPageLayout.value.find((item) => item.questionId === data.questionId);
    if (topicInfo) {
      editTopic(data.event, topicInfo);
    }
  });
});

const currBookPageLayout = computed(() => {
  const list = props.currBookPage?.currBookPageData.layout || [];
  return list.filter((item) => {
    return item.question.type && item.question.type >= 100 && item.question.type < 200;
  });
});

const addTopicFormBubbleRef = useTemplateRef<{ show: Function }>('addTopicFormBubbleRef');

/**
 * 新增题目
 */
function addTopic(event: MouseEvent, topicInfo: TopicInfo | undefined = undefined) {
  if (!props.currBookPage) {
    message.error('请先在目录中选择页码');
    return;
  }
  addTopicFormBubbleRef.value?.show({
    eventElement: event,
    currBookPage: props.currBookPage,
    topicInfo,
  });
}

/**
 * 编辑题目
 */
function editTopic(event: MouseEvent, topicInfo: TopicInfo) {
  const questionId = topicInfo.questionId;
  const areas = props.currBookPage!.currBookPageData.areas || [];
  // The original code looked up in areas, but passed topicInfo (from layout) to show.
  // Assuming areas and layout are synced or topicInfo is sufficient.
  // The original code checked findIndex in areas.
  const questionIndex = areas.findIndex((item) => item.id === questionId);
  // Actually layout items contain question info.
  // The original code logic: if (questionIndex >= 0) ...
  // But if currBookPageLayout is computed from layout, and layout has it, then it exists in layout.
  // Does layout imply area exists?
  // Let's keep the check if areas exists.
  // But `areas` is in `currBookPageData`.
  if (props.currBookPage && topicInfo) {
    addTopicFormBubbleRef.value?.show({
      eventElement: event,
      currBookPage: props.currBookPage,
      topicInfo,
    });
  }
}
</script>

<style scoped>
/* Using UnoCSS utility classes in template, minimal scoped styles needed */
</style>
