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

const CookieBanner = ({
    children,
    className,
    isHidden = true,
    title = 'Information',
    ...props
}: AbstractNotificationBannerProps) => {
    const ref = useRef(null);

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

    return (
        <>
            <AbstractNotificationBanner
                className={clsx([
                    'ds_notification--large',
                    'ds_notification--cookie',
                    'js-initial-cookie-content',
                    className
                ])}
                data-module="ds-cookie-notification"
                isHidden={isHidden}
                ref={ref}
                title={title}
                {...props}
            >
                {children}
            </AbstractNotificationBanner>
        </>
    );
}

CookieBanner.displayName = 'CookieBanner';
CookieBanner.Buttons = AbstractNotificationBanner.Buttons;
CookieBanner.Buttons.displayName = 'CookieBanner.Buttons';

export default CookieBanner;