import React from 'react';
import { HashRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import AppRoutes from './router';
import Layout from './components/UI/Layout';
import AppErrorBoundary from './components/UI/AppErrorBoundary';

const queryClient = new QueryClient( {
	defaultOptions: {
		queries: {
			staleTime: 60_000,
			gcTime: 10 * 60_000,
			refetchOnWindowFocus: false,
			refetchOnReconnect: false,
			retry: 1,
		},
	},
} );

// Submenu links carry their route in the fragment (admin.php?page=arrayfunnel#/checkout).
// Landing on the menu root has no fragment, so seed one before HashRouter reads it.
function seedDefaultHashRoute() {
	if ( typeof window === 'undefined' ) {
		return;
	}

	if ( ! window.location.hash.startsWith( '#/' ) ) {
		window.location.hash = '#/';
	}
}

export default function App() {
	seedDefaultHashRoute();

	return (
		<QueryClientProvider client={ queryClient }>
			<HashRouter>
				<Layout>
					<AppErrorBoundary>
						<AppRoutes />
					</AppErrorBoundary>
				</Layout>
			</HashRouter>
		</QueryClientProvider>
	);
}