/**
 * WordPress dependencies
 */
import { Button, Popover, SlotFillProvider } from '@safe-wordpress/components';
import { StrictMode, useState } from '@safe-wordpress/element';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import { PremiumDialog } from '@nelio-content/components';
import { SocialMessageEditor } from '@nelio-content/social-message-editor';

/**
 * Internal dependencies
 */
import './style.scss';

import { PostFilter } from '../post-filter';
import { PostList } from '../post-list';
import { SortingCriterionSelector } from '../sorting-criterion-selector';
import { ExportDialog } from '../export-dialog';

export const Layout = (): JSX.Element => {
	const [ isExportDialogOpen, setIsExportDialogOpen ] = useState( false );
	return (
		<StrictMode>
			<SlotFillProvider>
				<div className="nelio-content-analytics">
					<div className="nelio-content-analytics__title">
						<h1 className="nelio-content-analytics__actual-title wp-heading-inline">
							{ _x( 'Analytics', 'text', 'nelio-content' ) }
						</h1>

						<PostFilter />
						<Button
							className="nelio-content-analytics__export-button"
							icon="download"
							variant="secondary"
							onClick={ () => setIsExportDialogOpen( true ) }
						>
							{ _x( 'Export CSV', 'command', 'nelio-content' ) }
						</Button>
					</div>
					<SortingCriterionSelector />

					<PostList />
					{ isExportDialogOpen && (
						<ExportDialog
							onClose={ () => setIsExportDialogOpen( false ) }
						/>
					) }
				</div>

				<SocialMessageEditor />
				<PremiumDialog />
				<Popover.Slot />
			</SlotFillProvider>
		</StrictMode>
	);
};