import { TabItem, TabMap } from '@/types/custom-types';
import { computed, ref, nextTick } from 'vue';

const getTabsFromMap = (tabMap: TabMap) => {
  const tabs = Object.keys(tabMap).map(x => tabMap[x]);
  tabs.sort((a, b) => (a.tab > b.tab ? 1 : a.tab < b.tab ? -1 : 0));
  return tabs;
};

export const useTabMap = (tabMap: TabMap) => {
  const localGetTabsFromMap = () => getTabsFromMap(tabMap);
  return { getTabsFromMap: localGetTabsFromMap };
};

export const useTabs = (initialTabOrTabMap: number | TabMap) => {
  let initialTab = typeof initialTabOrTabMap === 'number' ? initialTabOrTabMap : 999;
  if (typeof initialTabOrTabMap === 'object') {
    for (const key in initialTabOrTabMap) {
      const t = initialTabOrTabMap[key];
      if (t.tab >= 0 && t.tab < initialTab) {
        initialTab = t.tab;
      }
    }
  }
  const tabRef = ref(initialTab);
  const currentTab = computed({
    get() {
      return tabRef.value;
    },
    set(val: number) {
      changeTab(val);
    },
  });
  const reverse = ref(false);

  const changeTab = (tab: number) => {
    reverse.value = tab < tabRef.value;
    nextTick(() => (tabRef.value = tab));
  };

  let tabNum = initialTab;
  const createTab = (label: string, disabled?: () => boolean): TabItem => {
    const tab = tabNum++;
    const key = label.toLowerCase().replace(/\s/g, '-') + '-' + tab;
    return {
      key,
      tab,
      label,
      disabled,
    };
  };

  return {
    createTab,
    getTabsFromMap,
    currentTab,
    reverse,
    changeTab,
  };
};