<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { getLocalizedText } from "../../../../../share/locale";
import { useActiveTabId } from "../../../../../share/use-active-tab-id";
import SlotRenderer from "../../../../../share/slot-renderer.vue";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../../ui/tabs";
import { findBlock } from "../../../utils/resolve";
defineOptions({ name: "ShwfedBlockTabsRuntime" });
const block = defineModel("block", { type: null, ...{ required: true } });
const props = defineProps({
  configure: { type: Function, required: false }
});
const configure = computed(() => props.configure ?? (() => {
}));
const { locale } = useI18n();
const tabIds = computed(() => block.value.tabs.map((t) => t.id));
const active = useActiveTabId(block.value.id, tabIds);
function paneLabel(tab, index) {
  return getLocalizedText(tab.label, locale.value) ?? `\u6807\u7B7E\u9875 ${index + 1}`;
}
function updateTabSlot(tabId, next) {
  const nextTabs = block.value.tabs.map(
    (t) => t.id === tabId ? { ...t, slot: next } : t
  );
  block.value = { ...block.value, tabs: nextTabs };
}
</script>

<template>
  <ClientOnly>
    <Tabs
      :model-value="active"
      :style="block.style"
      @update:model-value="(v) => {
  if (typeof v === 'string') active = v;
}"
    >
      <TabsList>
        <TabsTrigger
          v-for="(t, i) in block.tabs"
          :key="t.id"
          :value="t.id"
          class="max-[800px]:flex-1 max-[800px]:justify-center"
        >
          {{ paneLabel(t, i) }}
        </TabsTrigger>
      </TabsList>
      <TabsContent
        v-for="t in block.tabs"
        :key="t.id"
        :value="t.id"
        class="outline-none"
      >
        <SlotRenderer
          :slot-value="t.slot"
          :configure="configure"
          :find-entry="findBlock"
          @update:slot-value="(s) => updateTabSlot(t.id, s)"
        />
      </TabsContent>
    </Tabs>
  </ClientOnly>
</template>
