<template>
  <section v-show="value === props.name" ref="tab" role="tabpanel" tabindex="-1">
    <slot></slot>
  </section>
</template>

<script setup lang="ts">
import { onMounted, onBeforeMount, getCurrentInstance, ref, watch, inject, type ComponentInternalInstance } from 'vue';

interface Tab {
  uid: number;
  name: string;
  label: string;
}

const instance = ref<ComponentInternalInstance | null>();

const isActive = ref<unknown>(null);

const value = inject('value');
const updateTab: (tab: Tab) => void = inject('updateTab') as (tab: Tab) => void;

defineExpose({
  isActive,
});

onBeforeMount(() => {});
onMounted(() => {
  instance.value = getCurrentInstance();

  const addTab = inject('addTab') as (tab: Tab) => void;
  addTab({
    uid: instance.value?.uid ?? 0,
    name: props.name,
    label: props.label,
  });

  // resolved = {"test123": 123, "blub": "abc"}
});

//Props
interface Props {
  label: string;
  name: string;
}
const props = defineProps<Props>();

watch(props, (_newValue, _oldValue) => {
  updateTab({
    uid: instance.value?.uid ?? 0,
    name: props.name,
    label: props.label,
  });
});
</script>
