<script setup>
import { useLight } from "#imports";
import { useSlots, useRouter, useRoute, watch, computed } from "#imports";
const props = defineProps({
  name: { type: String, required: false, default: "tab" },
  route: { type: Boolean, required: false },
  modelValue: { type: null, required: false },
  vertical: { type: Boolean, required: false, skipCheck: true },
  outsideArrows: { type: Boolean, required: false, skipCheck: true },
  mobileArrows: { type: Boolean, required: false, skipCheck: true },
  align: { type: null, required: false, default: "justify" },
  breakpoint: { type: null, required: false },
  activeColor: { type: null, required: false },
  activeBgColor: { type: null, required: false },
  indicatorColor: { type: null, required: false },
  contentClass: { type: null, required: false },
  activeClass: { type: null, required: false },
  leftIcon: { type: null, required: false },
  rightIcon: { type: null, required: false },
  stretch: { type: Boolean, required: false, skipCheck: true },
  shrink: { type: Boolean, required: false, skipCheck: true },
  switchIndicator: { type: Boolean, required: false, skipCheck: true },
  narrowIndicator: { type: Boolean, required: false, skipCheck: true },
  inlineLabel: { type: Boolean, required: false, skipCheck: true },
  noCaps: { type: Boolean, required: false, skipCheck: true },
  dense: { type: Boolean, required: false, skipCheck: true },
  "onUpdate:modelValue": { type: Function, required: false }
});
const light = useLight();
const slots = useSlots();
const router = useRouter();
const route = useRoute();
const modelValue = defineModel({ type: null });
if (modelValue.value === void 0) {
  if (props.route && props.name && route.query[props.name]) {
    modelValue.value = route.query[props.name];
  } else {
    modelValue.value = slots.default?.()[0]?.props?.name;
  }
}
watch(modelValue, (newValue) => {
  if (props.route && props.name && newValue) {
    router.push({ query: { ...route.query, [props.name]: newValue } });
  }
}, { immediate: false });
watch(() => props.name ? route.query[props.name] : null, (newTab) => {
  if (props.route && props.name && newTab && newTab !== modelValue.value) {
    modelValue.value = newTab;
  }
});
const L_KEYS = ["route", "name"];
const tabsProps = computed(() => {
  const result = {};
  for (const [k, v] of Object.entries(props)) {
    if (!L_KEYS.includes(k) && v !== void 0) result[k] = v;
  }
  return result;
});
</script>

<template>
    <l-card>
        <q-tabs v-bind="tabsProps" class="text-grey"
            :active-color="light.color"
            :indicator-color="light.color"
            v-model="modelValue">
            <slot></slot>
        </q-tabs>
        <q-tab-panels v-model="modelValue">
            <slot></slot>
        </q-tab-panels>
    </l-card>
</template>
