/**
 * WordPress dependencies
 */
import { dispatch } from '@safe-wordpress/data';
import domReady from '@safe-wordpress/dom-ready';
import { StrictMode, render } from '@safe-wordpress/element';

/**
 * External dependencies
 */
import { debounce } from 'lodash';
import { registerCommands } from '@nab/commands';
import { store as NAB_DATA } from '@nab/data';
import { registerCoreExperiments } from '@nab/experiment-library';
import { createStagingNotice } from '@nab/utils';
import type { ExperimentId } from '@nab/types';

/**
 * Internal dependencies
 */
import './style.scss';
import { ResultsProvider } from './components/provider';
import { Layout } from './components/layout';

type Settings = {
	readonly experimentId: ExperimentId;
	readonly staging: 'environment-type' | 'url' | false;
	readonly isPublicView: boolean;
	readonly isReadOnlyActive: boolean;
};

export function initPage( id: string, settings: Settings ): void {
	const content = document.getElementById( id );

	registerCoreExperiments();
	domReady( () => registerCommands() );

	const { experimentId, staging, isPublicView, isReadOnlyActive } = settings;

	createStagingNotice( staging );
	render(
		<Main
			experimentId={ experimentId }
			isPublicView={ isPublicView }
			isReadOnlyActive={ isReadOnlyActive }
		/>,
		content
	);
}

const Main = ( {
	experimentId,
	isPublicView,
	isReadOnlyActive,
}: {
	readonly experimentId: ExperimentId;
	readonly isPublicView: boolean;
	readonly isReadOnlyActive: boolean;
} ) => (
	<StrictMode>
		<ResultsProvider
			experimentId={ experimentId }
			isPublicView={ isPublicView }
			isReadOnlyActive={ isReadOnlyActive }
		>
			<Layout />
		</ResultsProvider>
	</StrictMode>
);

function fixSidebarDimensions() {
	const height = window.innerHeight;
	const wpAdminBar = document.getElementById( 'wpadminbar' );
	const adminBarHeight = wpAdminBar
		? wpAdminBar.getBoundingClientRect().height
		: 0;

	const { setPageAttribute } = dispatch( NAB_DATA );
	void setPageAttribute( 'sidebarDimensions', {
		top: adminBarHeight,
		height: `${ height - adminBarHeight }px`,
		applyFix: 782 <= window.innerWidth, // medium breakpoint
	} );
}
window.addEventListener( 'resize', debounce( fixSidebarDimensions, 100 ) );
domReady( fixSidebarDimensions );