<template>
    <div class="flex relative">
        <div class="epic-action-bar">
            <ul class="epic-actions-container">
                <!-- 只有 activitybars 有数据时才渲染 -->
                <li
                    v-for="(item, index) in activitybars"
                    :key="item.id || index"
                    class="epic-action-item"
                    :title="item.title"
                    :class="{ checked: actionBarCheckedIndex === index }"
                    @click="handleClick(item, index)"
                >
                    <EIcon prefix="" class="iconfont relative" :name="item.icon" />
                    <div class="text-14px">{{ item.title }}</div>
                </li>
            </ul>
        </div>
        <!-- 只有选中索引有效且有侧边栏组件时才显示 -->
        <div class="epic-left-sidebar" :class="{ hide: !actionBarCheckedIndex && actionBarCheckedIndex !== 0 }">
            <div class="epic-sidebar-container">
                <component :is="sidebarComponent" v-if="sidebarComponent" />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, computed, shallowRef, watchEffect } from "vue";
import { pluginManager } from "@/components/EpicDesigner/utils";
import { ActivitybarModel } from "@/components/EpicDesigner/utils";
import EIcon from "../../../../icon";

defineOptions({
    name: "EActionBar"
});

// 1. 计算属性：过滤可见的 activitybar 项
const activitybars = computed<ActivitybarModel[]>(() => {
    // 安全处理：确保 pluginManager.viewsContainers.activitybars.value 是数组
    const rawActivitybars = pluginManager.viewsContainers.activitybars.value || [];
    return rawActivitybars.filter(item => item?.visible !== false); // 避免 item 为 undefined 导致的过滤错误
});

// 2. 选中索引：初始化为 null（避免空数组时默认 0 导致错误）
const actionBarCheckedIndex = ref<number | null>(null);

// 3. 侧边栏组件：用 shallowRef 存储，初始为 null
const sidebarComponent = shallowRef<ActivitybarModel["component"] | null>(null);

// 4. 响应式初始化：当 activitybars 变化时，安全设置默认选中项
watchEffect(() => {
    const validActivitybars = activitybars.value;
    // 如果有有效项，且当前未选中任何项，则选中第一个
    if (validActivitybars.length > 0 && actionBarCheckedIndex.value === null) {
        actionBarCheckedIndex.value = 0;
        sidebarComponent.value = validActivitybars[0].component; // 此时 validActivitybars[0] 一定存在
    }
    // 如果没有有效项，重置状态
    else if (validActivitybars.length === 0) {
        actionBarCheckedIndex.value = null;
        sidebarComponent.value = null;
    }
});

// 5. 点击事件：增加空值判断，避免无效操作
function handleClick(item: ActivitybarModel, index: number) {
    // 安全校验：确保 item 有 component（避免无效项点击）
    if (!item?.component) return false;

    // 切换选中状态（点击已选中项则取消）
    if (actionBarCheckedIndex.value === index) {
        actionBarCheckedIndex.value = null;
        sidebarComponent.value = null;
        return false;
    }

    // 设置新选中项和侧边栏组件
    sidebarComponent.value = item.component;
    actionBarCheckedIndex.value = index;
}
</script>
