/**
 * Notice Component
 *
 * @package Advanced_Customer_Account
 */

import { useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';

/**
 * Notice component for displaying messages.
 *
 * @param {Object}   props             Component props.
 * @param {string}   props.type        Notice type (success, error, warning, info).
 * @param {string}   props.message     Notice message.
 * @param {boolean}  props.isDismissible Can be dismissed.
 * @param {Function} props.onDismiss   Dismiss handler.
 * @param {number}   props.autoDismiss Auto dismiss after ms (0 to disable).
 * @param {string}   props.className   Additional CSS classes.
 * @return {JSX.Element|null} Notice component.
 */
const Notice = ( {
    type = 'info',
    message,
    isDismissible = true,
    onDismiss,
    autoDismiss = 0,
    className = '',
} ) => {
    // Auto dismiss after timeout
    useEffect( () => {
        if ( autoDismiss > 0 && onDismiss ) {
            const timer = setTimeout( onDismiss, autoDismiss );
            return () => clearTimeout( timer );
        }
    }, [ autoDismiss, onDismiss ] );

    if ( ! message ) {
        return null;
    }

    const classes = classnames(
        'aca-notice',
        `aca-notice--${ type }`,
        className
    );

    const iconMap = {
        success: 'yes-alt',
        error: 'dismiss',
        warning: 'warning',
        info: 'info',
    };

    return (
        <div className={ classes } role="alert">
            <span className={ `dashicons dashicons-${ iconMap[ type ] }` } aria-hidden="true" />
            <span className="aca-notice__message">{ message }</span>
            { isDismissible && onDismiss && (
                <button
                    type="button"
                    className="aca-notice__dismiss"
                    onClick={ onDismiss }
                    aria-label={ __( 'Dismiss notice', 'advanced-customer-account' ) }
                >
                    <span className="dashicons dashicons-no-alt" aria-hidden="true" />
                </button>
            ) }
        </div>
    );
};

export default Notice;