import { computed, ref, watch } from "vue";

export interface TabControlItem {
  text: string,
  [key: string]: any,
}

export function useTabControl(options: {
  tabs?: TabControlItem[],
  onTabChange?: (tab: number, tabId: number) => void,
}) {

  const tabCurrentIndex = ref(0)
  const tabCurrentId = computed(() => {
    return tabsArray.value.filter(t => t.visible !== false)[tabCurrentIndex.value].id
  });
  const tabsArray = ref<TabControlItem[]>(options.tabs ?? []);

  watch(tabCurrentIndex, (v) => {
    options.onTabChange?.(v, tabCurrentId.value) 
    if (tabsArray.value[v].jump)
      tabsArray.value[v].jump()
  })

  const tabs = computed(() => {
    return tabsArray.value.filter(t => t.visible !== false)
  })

  return {
    tabCurrentId,
    tabCurrentIndex,
    tabs,
    tabsArray,
  }
}