import { useEffect, useRef } from 'react';
import AbstractNotificationBanner from '../../common/AbstractNotificationBanner';
import DSNotificationBanner from '@scottish-government/design-system/dist/scripts/components/notification-banner/notification-banner';
import { AbstractNotificationBannerProps } from '../../common/AbstractNotificationBanner/types';
import clsx from 'clsx';

const NotificationBanner = ({
    children,
    className,
    hasColourIcon,
    hasIcon,
    hasInverseIcon,
    isDismissable,
    isHidden,
    title = 'Information',
    ...props
}: AbstractNotificationBannerProps) => {
    const ref = useRef(null);

    useEffect(() => {
        /* istanbul ignore else */
        if (ref.current) {
            new DSNotificationBanner(ref.current).init();
        }
    }, [ref]);

    return (
        <AbstractNotificationBanner
            className={clsx([
                'ds_reversed',
                className
            ])}
            icon={hasIcon ? "Warning" : undefined}
            hasColourIcon={hasColourIcon}
            hasInverseIcon={hasInverseIcon}
            isDismissable={isDismissable}
            isHidden={isHidden}
            ref={ref}
            title={title}
            {...props}
        >
            {children}
        </AbstractNotificationBanner>
    );
};

NotificationBanner.displayName = 'NotificationBanner';
NotificationBanner.Buttons = AbstractNotificationBanner.Buttons;

export default NotificationBanner;