<script setup lang="ts">
/**
 * `card.tab` element composition.
 *
 * Renders a tabbed container. Each tab in `tabs` owns an optional
 * `nestedElements` array of resolved child elements. In the FormBuilder
 * each tab's `elementList` IDs are resolved before being forwarded here.
 */
import { computed, ref } from "vue"
import type { CardElement } from "@/definitions/elements"
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import ElementRenderer from "@/engine/ElementRenderer.vue"
import { cn } from "@/lib/utils"

interface TabEntry {
  id: string
  label: string
  nestedElements?: Array<Record<string, unknown>>
}

export interface TabCardProps {
  label?: string
  title?: string
  showCard?: boolean
  gutterY?: string
  gutterX?: string
  /** Tab definitions including resolved child elements. */
  tabs?: TabEntry[]
  activeTab?: number
  item?: Record<string, unknown>
  classList?: string[] | string
}

const props = withDefaults(defineProps<TabCardProps>(), {
  showCard: true,
  gutterY: "1rem",
  gutterX: "0",
  tabs: () => [],
  activeTab: 0,
  item: () => ({}),
})

const resolvedTabs = computed(() =>
  (props.tabs ?? []).map((tab) => ({
    ...tab,
    children: (tab.nestedElements ?? []).filter(
      (e): boolean =>
        typeof e === "object" &&
        e !== null &&
        typeof (e as Record<string, unknown>).type === "string",
    ) as unknown as CardElement[],
  })),
)

const activeTabId = computed(
  () => resolvedTabs.value[props.activeTab ?? 0]?.id ?? resolvedTabs.value[0]?.id ?? "",
)
const currentTab = ref(activeTabId.value)

const bodyStyle = computed(() => ({
  rowGap: props.gutterY,
  columnGap: props.gutterX,
}))

const heading = computed(() => props.title ?? props.label)
</script>

<template>
  <Card v-if="props.showCard !== false" :class="cn(props.classList)">
    <CardHeader v-if="heading">
      <span class="text-base font-semibold">{{ heading }}</span>
    </CardHeader>
    <CardContent>
      <Tabs v-model="currentTab">
        <TabsList v-if="resolvedTabs.length">
          <TabsTrigger
            v-for="tab in resolvedTabs"
            :key="tab.id"
            :value="tab.id"
          >
            {{ tab.label }}
          </TabsTrigger>
        </TabsList>
        <TabsContent
          v-for="tab in resolvedTabs"
          :key="tab.id"
          :value="tab.id"
          class="flex flex-col pt-3"
          :style="bodyStyle"
        >
          <ElementRenderer
            v-for="child in tab.children"
            :key="child.id"
            :element="child"
            :item="props.item"
          />
          <p v-if="!tab.children.length" class="py-3 text-sm text-muted-foreground">
            No elements configured for this tab.
          </p>
        </TabsContent>
      </Tabs>
      <p v-if="!resolvedTabs.length" class="py-3 text-sm text-muted-foreground">
        No tabs configured.
      </p>
    </CardContent>
  </Card>

  <div v-else :class="cn(props.classList)">
    <Tabs v-model="currentTab">
      <TabsList v-if="resolvedTabs.length">
        <TabsTrigger
          v-for="tab in resolvedTabs"
          :key="tab.id"
          :value="tab.id"
        >
          {{ tab.label }}
        </TabsTrigger>
      </TabsList>
      <TabsContent
        v-for="tab in resolvedTabs"
        :key="tab.id"
        :value="tab.id"
        class="flex flex-col pt-3"
        :style="bodyStyle"
      >
        <ElementRenderer
          v-for="child in tab.children"
          :key="child.id"
          :element="child"
          :item="props.item"
        />
      </TabsContent>
    </Tabs>
  </div>
</template>
