<script setup>
import { reactiveOmit } from "@vueuse/core";
import { TabsList } from "reka-ui";
import { nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
import { cn } from "../../../utils/cn";
const props = defineProps({
  loop: { type: Boolean, required: false },
  asChild: { type: Boolean, required: false },
  as: { type: null, required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
const delegatedProps = reactiveOmit(props, "class");
const barEl = ref(null);
const barStyle = shallowRef({});
const ready = ref(false);
let mo = null;
let ro = null;
function measure() {
  const bar = barEl.value;
  const root = bar?.parentElement;
  if (!root) return;
  const active = root.querySelector(
    '[data-slot="tabs-trigger"][data-state="active"] > [data-slot="tabs-trigger-content"]'
  );
  if (!active) return;
  const rootRect = root.getBoundingClientRect();
  const rect = active.getBoundingClientRect();
  barStyle.value = {
    width: `${rect.width}px`,
    transform: `translateX(${rect.left - rootRect.left}px)`
  };
  ready.value = true;
}
function schedule() {
  nextTick(measure);
}
onMounted(() => {
  const root = barEl.value?.parentElement;
  if (!root) return;
  if (typeof MutationObserver !== "undefined") {
    mo = new MutationObserver(schedule);
    mo.observe(root, {
      subtree: true,
      childList: true,
      attributes: true,
      attributeFilter: ["data-state"]
    });
  }
  if (typeof ResizeObserver !== "undefined") {
    ro = new ResizeObserver(schedule);
    ro.observe(root);
    for (const el of root.querySelectorAll(
      '[data-slot="tabs-trigger"], [data-slot="tabs-trigger-content"]'
    )) {
      ro.observe(el);
    }
  }
  schedule();
});
onBeforeUnmount(() => {
  mo?.disconnect();
  mo = null;
  ro?.disconnect();
  ro = null;
});
</script>

<template>
  <TabsList
    data-slot="tabs-list"
    v-bind="delegatedProps"
    :class="cn(
  'relative flex w-full items-center border-b border-[color-mix(in_srgb,black_10%,white)]',
  props.class
)"
  >
    <slot />
    <div
      ref="barEl"
      data-slot="tabs-active-bar"
      aria-hidden="true"
      class="pointer-events-none absolute -bottom-px left-0 z-1 h-0.5 bg-(--primary) transition-[width,transform] duration-300 ease-[cubic-bezier(0.645,0.045,0.355,1)]"
      :style="{ ...barStyle, visibility: ready ? 'visible' : 'hidden' }"
    />
  </TabsList>
</template>
