/**
 * External dependencies
 */
import { useLocation } from 'react-router-dom';
import { ErrorBoundary } from 'react-error-boundary';

/**
 * WordPress dependencies
 */
import { useEffect, useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Flex, FlexBlock } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';

/**
 * Solid dependencies
 */
import { Heading, TextWeight } from '@ithemes/ui';

/**
 * Internal dependencies
 */
import { TopToolbar } from '@ithemes/security-ui';
import { ErrorRenderer, Navigation } from '../';
import { StyledMainContainer, StyledNavigationContainer, StyledMain } from './styles';

export default function Main( { children } ) {
	const isMedium = useViewportMatch( 'medium' );
	// Focus handling
	const ref = useRef();
	const location = useLocation();
	useEffect( () => {
		ref.current?.focus();
		ref.current?.ownerDocument.body.scrollTo( 0, 0 );
	}, [ location ] );

	return (
		<>
			<TopToolbar />
			<StyledMainContainer>
				<Heading level={ 1 } text={ __( 'Settings', 'it-l10n-ithemes-security-pro' ) } weight={ TextWeight.NORMAL } />
				<Flex gap={ 5 } align="start" direction={ isMedium ? 'row' : 'column' }>
					<StyledNavigationContainer isMedium={ isMedium }>
						<Navigation orientation={ isMedium ? 'vertical' : 'horizontal' } />
					</StyledNavigationContainer>
					<FlexBlock>
						<StyledMain
							ref={ ref }
							aria-labelledby="itsec-page-header"
						>
							<ErrorBoundary FallbackComponent={ ErrorRenderer }>
								{ children }
							</ErrorBoundary>
						</StyledMain>
					</FlexBlock>
				</Flex>
			</StyledMainContainer>
		</>
	);
}
