import React from 'react';
import { useNavigate } from 'react-router-dom';
import { adminPath } from '../../constants';
import { useEventContext } from '../../context/EventContext';
import { NavKey } from '../components/BottomNav';

export function useMobileNav(currentSlug?: string | null) {
  const navigate = useNavigate();
  const { activeEvent } = useEventContext();
  const slug = currentSlug ?? activeEvent?.slug ?? null;

  const go = React.useCallback(
    (key: NavKey) => {
      if (key === 'tasks') {
        if (slug) {
          navigate(adminPath(`/mobile/events/${slug}/tasks`));
        } else {
          navigate(adminPath('/mobile/tasks'));
        }
        return;
      }
      if (key === 'uploads') {
        if (slug) {
          navigate(adminPath(`/mobile/events/${slug}/photos`));
        } else {
          navigate(adminPath('/mobile/uploads'));
        }
        return;
      }
      if (key === 'home') {
        navigate(adminPath('/mobile/dashboard'));
        return;
      }
      if (key === 'profile') {
        navigate(adminPath('/mobile/profile'));
      }
    },
    [navigate, slug]
  );

  return { go, slug };
}