import type { UseQueryResult } from '@tanstack/react-query';
import type { JSX } from 'react';
import type { Status } from '../shared/api/types/status';
import type { View } from '../shared/lib/route';
import { LoadError } from '../shared/ui/LoadError';
import { Skeleton } from '../shared/ui/Skeleton';
import { WelcomeView } from '../features/welcome/WelcomeView';
import { CurrentView } from './CurrentView';

type MainContentProps = {
	view: View;
	statusQuery: UseQueryResult< Status >;
};

export function MainContent( {
	view,
	statusQuery,
}: MainContentProps ): JSX.Element {
	const status = statusQuery.data;

	if ( status?.first_run === true ) {
		return <WelcomeView status={ status } />;
	}

	if ( status !== undefined ) {
		return <CurrentView view={ view } status={ status } />;
	}

	if ( statusQuery.isError ) {
		return (
			<LoadError
				error={ statusQuery.error }
				onRetry={ () => {
					void statusQuery.refetch();
				} }
			/>
		);
	}

	return <Skeleton />;
}