import { useEffect } from 'react';
import { bannerStoreActions } from '../store';
import { useBanner } from './useBanner';

export type UseAutoHideBannerEffectArg = {
  bannerAutoHideTimeout?: number;
};

export const DEFAULT_BANNER_AUTO_HIDE_TIMEOUT = 4000;

export function useAutoHideBannerEffect({
  bannerAutoHideTimeout = DEFAULT_BANNER_AUTO_HIDE_TIMEOUT,
}) {
  const { banners } = useBanner();
  useEffect(() => {
    let timeout;
    if (banners.length) {
      timeout = setTimeout(() => {
        bannerStoreActions.updateBannerItems(banners.slice(1));
      }, bannerAutoHideTimeout);
    }
    return () => {
      if (timeout) {
        clearTimeout(timeout);
      }
    };
  }, [banners, bannerAutoHideTimeout]);
}