/**
 * WordPress dependencies
 */
import { useSelect } from '@wordpress/data';

/**
 * Internal dependencies
 */
import { Position } from './position';
import { Tabs } from './tabs';
import { Status } from './status';
import { Experiments } from './experiments';
import { Events } from './events';
import { HeatmapClicks } from './heatmap-clicks';
import { ClickHighlighter } from './click-highlighter';

import { store as NAB_CHECKER } from '../store';

export const Wrapper = ( { zIndex }: { zIndex: string } ): JSX.Element => {
	const position = useSelect(
		( select ) => select( NAB_CHECKER ).getPosition(),
		[]
	);

	return (
		<>
			<ClickHighlighter zIndex={ zIndex } />
			<div
				style={ {
					backdropFilter: 'blur(5px)',
					WebkitBackdropFilter: 'blur(5px)',
					background: 'rgba(0, 0, 0, 0.8)',
					borderRadius: '3px',
					color: 'white',
					display: 'flex',
					flexDirection: 'column',
					padding: '1em',
					position: 'fixed',
					zIndex,
					width: '30em',
					maxWidth: 'calc(100vw - 5em)',
					maxHeight: '60vh',
					...getPositionCoords( position ),
				} }
			>
				<Position />
				<Tabs />
				<div style={ { flexGrow: '1', overflow: 'auto' } }>
					<Content />
				</div>
			</div>
		</>
	);
};

// =====
// VIEWS
// =====

function Content(): JSX.Element {
	const tab = useSelect( ( select ) => select( NAB_CHECKER ).getTab(), [] );

	switch ( tab ) {
		case 'status':
			return <Status />;
		case 'experiments':
			return <Experiments />;
		case 'events':
			return <Events />;
		case 'heatmap-clicks':
			return <HeatmapClicks />;
	}
}

// =======
// HELPERS
// =======

function getPositionCoords(
	position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
): {
	readonly top?: '1em';
	readonly bottom?: '1em';
	readonly left?: '1em';
	readonly right?: '1em';
} {
	switch ( position ) {
		case 'top-left':
			return { top: '1em', left: '1em' };
		case 'top-right':
			return { top: '1em', right: '1em' };
		case 'bottom-left':
			return { bottom: '1em', left: '1em' };
		case 'bottom-right':
			return { bottom: '1em', right: '1em' };
	}
}