/**
 * WordPress dependencies
 */
import { NoticeList } from '@safe-wordpress/components';
import { useSelect, useDispatch } from '@safe-wordpress/data';
import { store as NOTICES } from '@safe-wordpress/notices';

/**
 * Internal dependencies
 */
import { PageTitle } from '../page-title';
import { SettingsTable } from '../settings';
import type { Settings } from '../../types';

export type LayoutProps = {
	readonly settings: Settings;
};

export const Layout = ( { settings }: LayoutProps ): JSX.Element => {
	const { hideTitle } = settings;
	const notices = useNotices();
	const { removeNotice } = useDispatch( NOTICES );

	return (
		<>
			{ ! hideTitle && <PageTitle /> }
			<NoticeList
				notices={ notices }
				className="components-editor-notices__pinned"
				onRemove={ ( noticeId ) => void removeNotice( noticeId ) }
			/>
			<SettingsTable settings={ settings } />
		</>
	);
};

// =====
// HOOKS
// =====

const useNotices = () =>
	useSelect( ( select ) => select( NOTICES ).getNotices() );