import type { JSX } from 'react';
import { useStatus } from '../shared/api/useStatus';
import { useRoute } from '../shared/lib/router';
import { ErrorBoundary } from '../shared/ui/ErrorBoundary';
import { Header } from './Header';
import { MainContent } from './MainContent';
import { Overlays } from './Overlays';
import { useScanFinished } from './useScanFinished';
import { useScanSteps } from './useScanSteps';
import { useStatusSync } from './useStatusSync';

const WELCOME_BOUNDARY_KEY = 'welcome';

export function Shell(): JSX.Element {
	const route = useRoute();
	const statusQuery = useStatus();
	const status = statusQuery.data;
	const isFirstRun = status?.first_run ?? false;

	useStatusSync( status );
	useScanFinished( status );
	useScanSteps( status?.scan.state );

	return (
		<div className="app">
			<Header view={ route.view } status={ status } />
			<main className="main">
				<ErrorBoundary
					key={ isFirstRun ? WELCOME_BOUNDARY_KEY : route.view }
				>
					<MainContent
						view={ route.view }
						statusQuery={ statusQuery }
					/>
				</ErrorBoundary>
			</main>
			{ status !== undefined && ! isFirstRun && (
				<Overlays params={ route.params } status={ status } />
			) }
		</div>
	);
}