/**
 * WordPress dependencies
 */
import domReady from '@safe-wordpress/dom-ready';
import '@safe-wordpress/notices';
import { render } from '@safe-wordpress/element';

/**
 * External dependencies
 */
import '@nab/data';
import { registerCoreExperiments } from '@nab/experiment-library';
import { registerCommands } from '@nab/commands';
import {
	PreviewUrlButton,
	QuotaMeter,
	TestCreationButtons,
	TitleAction,
} from '@nab/components';
import { createStagingNotice } from '@nab/utils';
import type { Experiment, Heatmap, SubscriptionPlan } from '@nab/types';

/**
 * Internal dependencies
 */
import './style.scss';
import { renderHelp } from './help';
import { OverviewProvider } from './components/provider';
import { OverviewExperimentsList } from './components/overview-experiments-list';

type Settings = {
	readonly staging: 'environment-type' | 'url' | false;
	readonly experiments: ReadonlyArray< Experiment >;
	readonly heatmaps: ReadonlyArray< Heatmap >;
	readonly subscription: SubscriptionPlan | false;
};

export function initPage( id: string, settings: Settings ): void {
	registerCoreExperiments();
	domReady( () => registerCommands() );

	const { experiments, heatmaps, staging, subscription } = settings;

	const titleAction = document.getElementById( `${ id }-title-action` );
	const content = document.getElementById( id );

	createStagingNotice( staging );
	render(
		<>
			<TestCreationButtons />
			<TitleAction isSubscribed={ !! subscription } />
			<PreviewUrlButton />
		</>,
		titleAction
	);

	render(
		<OverviewProvider>
			<QuotaMeter />
			<OverviewExperimentsList
				experiments={ experiments }
				heatmaps={ heatmaps }
			/>
		</OverviewProvider>,
		content
	);

	renderHelp();
}