window.GDD = window.GDD || {};

const { useState, useEffect, useCallback } = React;

/* Hash-based router */
window.GDD.useRouter = function() {
  const [page, setPage] = useState(getPage());

  function getPage() {
    const hash = window.location.hash.slice(1) || 'overview';
    return hash;
  }

  useEffect(() => {
    const handler = () => setPage(getPage());
    window.addEventListener('hashchange', handler);
    return () => window.removeEventListener('hashchange', handler);
  }, []);

  const navigate = useCallback((path) => {
    window.location.hash = path;
  }, []);

  return { page, navigate };
};