/**
 * External dependencies
 */
import { usePageAttribute } from '@nab/data';

/**
 * Internal dependencies
 */
import './style.scss';
import Logo from '../../../../../images/full-logo.svg';

import { PolicyBody } from '../policy-body';
import { ScanningHomepageBody } from '../scanning-homepage-body';
import { SuggestionsBody } from '../suggestions-body';

export const WelcomeLayout = (): JSX.Element => (
	<div className="nab-welcome-layout">
		<Logo
			className="nab-welcome-layout__logo"
			title="Nelio A/B Testing"
			alt="Nelio A/B Testing"
		/>

		<Body />
	</div>
);

const Body = (): JSX.Element => {
	const [ status ] = usePageAttribute( 'welcome/status', 'unchecked-policy' );

	switch ( status ) {
		case 'unchecked-policy':
		case 'checked-policy':
		case 'initializing-plugin':
			return <PolicyBody />;

		case 'homepage-scan':
			return <ScanningHomepageBody />;

		case 'suggestions':
			return <SuggestionsBody />;
	}
};
