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

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

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

  const tabCurrentIndex = ref(0)
  const tabCurrentId = ref(0)
  const tabsArray = ref<TabControlItem[]>(options.tabs ?? []);

  watch(tabCurrentIndex, (v) => {
    options.onTabChange?.(v, tabCurrentId.value) 
  })

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

  return {
    tabCurrentId,
    tabCurrentIndex,
    tabs,
    tabsArray,
    onTabClick(e: any) {
      tabCurrentIndex.value = e.index
      tabCurrentId.value = e.id
    }
  }
}