import { createContext, useEffect, useMemo, useState } from 'react';

type Tab = {
  icon: JSX.Element;
  key: string;
  title: string;
  useShowBadge?: () => boolean;
};

type NavigationContextType = {
  currentTab: string;
  setCurrentTab: (tab: string) => void;
  setTabsList: (list: Tab[]) => void;
  tabsList: Tab[];
};

export const NavigationContext = createContext<NavigationContextType>({} as NavigationContextType);

export function NavigationProvider({ children }: { readonly children: React.ReactNode }) {
  const [currentTab, setCurrentTab] = useState('');
  const [tabsList, setTabsList] = useState<Tab[]>([]);

  useEffect(() => {
    const defaultTab = tabsList.at(0);
    if (defaultTab) setCurrentTab(defaultTab.key);
  }, [tabsList]);

  const value = useMemo(
    () => ({ currentTab, setCurrentTab, setTabsList, tabsList }),
    [currentTab, setCurrentTab, setTabsList, tabsList]
  );

  return <NavigationContext.Provider value={value}>{children}</NavigationContext.Provider>;
}