import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const ImageBanner = () => {
  const [currentImage, setCurrentImage] = useState(null);
  const location = useLocation();
  
  const parentRoute = location.pathname.split('/').slice(0, 3).join('/');

  useEffect(() => {
    let isMounted = true;

    const loadRandomImage = async () => {
      const images = await importAll(require.context('../../public/assets/banners', false, /\.(png|jpe?g|svg)$/));
      const randomImage = Math.floor(Math.random() * images.length) + 1;

      const img = new Image();
      img.src = `${process.env.PUBLIC_URL}/assets/banners/banner-${randomImage}.jpg`;

      img.onload = () => {
        if (isMounted) {
          setCurrentImage(randomImage);
        }
      };
    };

    loadRandomImage();

    return () => {
      isMounted = false;
    };
  }, [parentRoute]);

  return (
    <>
      {currentImage && <img id="banner-img" src={`${process.env.PUBLIC_URL}/assets/banners/banner-${currentImage}.jpg`} alt="banner" />}
    </>
  );
};

export function importAll(r) {
  return r.keys().map(r);
}

export default ImageBanner;