/**
 * External Dependencies
 */
import clsx from 'clsx';

/**
 * WordPress dependencies
 */
import { useEffect } from '@wordpress/element';
import { store as noticesStore } from '@wordpress/notices';
import { dispatch, useSelect, useDispatch } from '@wordpress/data';

export function removeAllNotices() {
	dispatch( noticesStore ).removeAllNotices();
}

export function noticeSuccess( message, options ) {
	dispatch( noticesStore ).createSuccessNotice( message, options );
}

export function noticeError( message, options ) {
	dispatch( noticesStore ).createErrorNotice( message, options );
}

function Notice( {
	status,
	isDismissible,
	actions,
	onRemove,
	children,
	type,
} ) {
	const wrapperClasses = clsx(
		'flex items-center justify-between notice notice-alt !px-3',
		`notice-${ status }`,
		{ 'is-dismissible': isDismissible }
	);

	useEffect( () => {
		if ( 'timeout' !== type ) {
			return;
		}

		const timeId = setTimeout( () => {
			onRemove();
		}, 5000 );

		// Cleanup function to clear the timeout
		return () => clearTimeout( timeId );
		// eslint-disable-next-line react-hooks/exhaustive-deps -- run once on mount.
	}, [] );

	return (
		<div className={ wrapperClasses }>
			<div
				className="py-3"
				dangerouslySetInnerHTML={ { __html: children } }
			/>
			{ actions.map( ( action, index ) => {
				return (
					<button
						key={ index }
						className="button button-primary !ml-auto !mr-2"
						onClick={ ( event ) =>
							action.onClick( event, onRemove )
						}
					>
						{ action.label }
					</button>
				);
			} ) }
			{ isDismissible && (
				<button
					className="button-link !no-underline"
					onClick={ onRemove }
				>
					<span className="dashicons dashicons-no-alt"></span>
				</button>
			) }
		</div>
	);
}
/**
 * Renders the notices
 *
 * @return {React.ReactNode} The rendered component.
 */
export default function Notices() {
	const notices = useSelect(
		( select ) => select( noticesStore ).getNotices(),
		[]
	);
	const { removeNotice } = useDispatch( noticesStore );

	return (
		<>
			{ notices.map( ( notice ) => {
				return (
					<Notice
						key={ notice.id }
						onRemove={ () => removeNotice( notice.id ) }
						{ ...notice }
					>
						{ notice.content }
					</Notice>
				);
			} ) }
		</>
	);
}