<script setup>
import { toRef } from "vue";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator
} from "../ui/breadcrumb";
defineOptions({ name: "ShwfedConfigEditorBreadcrumb" });
const props = defineProps({
  state: { type: Object, required: true }
});
const breadcrumbs = toRef(() => props.state.breadcrumbs.value);
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <template
        v-for="(crumb, i) in breadcrumbs"
        :key="i"
      >
        <BreadcrumbItem>
          <BreadcrumbPage
            v-if="i === breadcrumbs.length - 1"
            class="font-bold"
          >
            {{ crumb.label }}
          </BreadcrumbPage>
          <BreadcrumbLink
            v-else-if="crumb.kind !== 'sub'"
            as="button"
            type="button"
            class="cursor-pointer text-zinc-500"
            @click="props.state.goTo(crumb.index)"
          >
            {{ crumb.label }}
          </BreadcrumbLink>
          <BreadcrumbLink
            v-else-if="crumb.clickable"
            as="button"
            type="button"
            class="cursor-pointer text-zinc-500"
            @click="props.state.goToSub(crumb.subIndex)"
          >
            {{ crumb.label }}
          </BreadcrumbLink>
          <span
            v-else
            class="text-zinc-500"
          >
            {{ crumb.label }}
          </span>
        </BreadcrumbItem>
        <BreadcrumbSeparator v-if="i < breadcrumbs.length - 1" />
      </template>
    </BreadcrumbList>
  </Breadcrumb>
</template>
