import { useCallback, useRef } from 'react';
import {
  useTogglableNav,
  UseTogglableNavReturn,
} from '@digigov/ui/navigation/NavList/hooks/useTogglableNav';

export interface UseNavListReturn extends UseTogglableNavReturn {
  registerNavItemMenu: (key: string) => { active: boolean; id: string };
}
export const useNavList = (): UseNavListReturn => {
  const registeredContainers = useRef({});

  const { registerButton, registerLink, opened, ...rest } = useTogglableNav({
    singleOpen: true,
    toggleOpenClose: true,
    toggleParentOpen: true,
    toggleProperty: 'active',
    onToggleProperty: 'onClick',
    ariaNavigation: true,
  });
  const registerNavItemMenu = useCallback(
    (key: string) => {
      return {
        ref: (el) => {
          if (el && !registeredContainers.current[el.id]) {
            registeredContainers.current[el.id] = el;
          }
        },
        active: opened[key],
        id: key,
      };
    },
    [opened]
  );
  return { registerButton, registerLink, opened, registerNavItemMenu, ...rest };
};