import useHashRoute from './hooks/useHashRoute';
import ToolList from './pages/ToolList';
import ToolBuilder from './pages/ToolBuilder';
import Settings from './pages/Settings';
import Instructions from './pages/Instructions';

export default function App() {
	const { route, navigate } = useHashRoute();

	// Match /tools/:id
	const editMatch = route.match( /^\/tools\/(\d+)$/ );

	if ( route === '/tools/new' ) {
		return <ToolBuilder navigate={ navigate } />;
	}

	if ( editMatch ) {
		return <ToolBuilder toolId={ parseInt( editMatch[ 1 ], 10 ) } navigate={ navigate } />;
	}

	if ( route === '/settings' ) {
		return <Settings navigate={ navigate } />;
	}

	if ( route === '/instructions' ) {
		return <Instructions navigate={ navigate } />;
	}

	return <ToolList navigate={ navigate } />;
}