<script setup>
import { computed, defineAsyncComponent, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { getLocalizedText } from "../../../../../share/locale";
import { cel } from "../../../../../utils/cel";
import { celBindings, injectCELContext } from "../../../../../utils/cel-context";
import { interpolateMarkdown } from "../../../../table/utils/runtime";
import { Markdown } from "../../../../ui/markdown";
defineOptions({ name: "ShwfedBlockAnimatedNumberRuntime" });
const NumberFlowGroup = defineAsyncComponent(
  () => import("@number-flow/vue").then((m) => m.NumberFlowGroup)
);
const Item = defineAsyncComponent(() => import("./item.vue"));
const block = defineModel("block", { type: null, ...{ required: true } });
const { locale } = useI18n();
const inheritedContext = injectCELContext();
const mounted = ref(false);
onMounted(() => {
  mounted.value = true;
});
const caption = computed(() => {
  const template = getLocalizedText(block.value.locale, locale.value) || "";
  if (!template) return "";
  return interpolateMarkdown(template, cel, celBindings(inheritedContext));
});
</script>

<template>
  <div class="flex h-full w-full flex-col items-center justify-center gap-2 text-center">
    <!-- NumberFlowGroup synchronizes the digit animations across all items. -->
    <NumberFlowGroup v-if="mounted">
      <div class="flex flex-wrap items-center justify-center gap-4 font-semibold text-zinc-900">
        <Item
          v-for="it in block.items"
          :key="it.id"
          :item="it"
        />
      </div>
    </NumberFlowGroup>

    <Markdown
      v-if="caption"
      :source="caption"
      class="prose prose-sm prose-zinc max-w-none text-xs text-zinc-500"
    />
  </div>
</template>
