import React, { useEffect, useState } from "react";

const BackgroundImages = () => {
  const [images, setImages] = useState([]);

  // List of background images to use
  const bgImages = [
    "/bg-ims/tux-large.webp",
    "/bg-ims/kitty.png",
    "/bg-ims/bash-logo.png",
    "/bg-ims/nixoslogo.png",
    "/bg-ims/Archlinux_600x600.png",
    "/bg-ims/blahaj.png",
    "/bg-ims/blahaj.png",
    "/bg-ims/blahaj.png",
    "/bg-ims/blahaj.png",
    "/bg-ims/blahaj.png",
  ];

  // Function to generate random values within a range
  const randomRange = (min, max) => Math.random() * (max - min) + min;

  // Function to generate new position and animation values
  const generateImageData = () => {
    // Generate random movement offsets
    const moveX1 = randomRange(-20, 20);
    const moveY1 = randomRange(-20, 20);
    const moveX2 = randomRange(-20, 20);
    const moveY2 = randomRange(-20, 20);
    const moveX3 = randomRange(-20, 20);
    const moveY3 = randomRange(-20, 20);
    const rotateDeg = randomRange(-20, 20);

    return {
      src: bgImages[Math.floor(Math.random() * bgImages.length)],
      size: randomRange(50, 150),
      opacity: randomRange(0.1, 0.3),
      // Animation durations (in seconds)
      moveDuration: randomRange(60, 120),
      rotateDuration: randomRange(30, 60),
      // Starting position
      startTop: randomRange(5, 90),
      startLeft: randomRange(5, 90),
      // Pre-calculated movement values
      moveX1,
      moveY1,
      moveX2,
      moveY2,
      moveX3,
      moveY3,
      rotateDeg,
    };
  };

  useEffect(() => {
    // Generate initial images
    const initialImages = Array(30).fill(null).map(generateImageData);
    setImages(initialImages);
  }, []);

  // Helper to create the keyframes CSS
  const generateKeyframesStyles = () => {
    return images
      .map(
        (img, index) => `
      @keyframes float-${index} {
        0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
        25% { transform: translate(-50%, -50%) translate(${img.moveX1}px, ${img.moveY1}px); }
        50% { transform: translate(-50%, -50%) translate(${img.moveX2}px, ${img.moveY2}px); }
        75% { transform: translate(-50%, -50%) translate(${img.moveX3}px, ${img.moveY3}px); }
      }
      @keyframes rotate-${index} {
        0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
        50% { transform: translate(-50%, -50%) rotate(${img.rotateDeg}deg); }
      }
    `
      )
      .join("\n");
  };

  return (
    <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
      {images.map((img, index) => (
        <div
          key={index}
          className="absolute"
          style={{
            top: `${img.startTop}%`,
            left: `${img.startLeft}%`,
            transform: "translate(-50%, -50%)",
            animation: `
              float-${index} ${img.moveDuration}s infinite ease-in-out,
              rotate-${index} ${img.rotateDuration}s infinite ease-in-out
            `,
          }}
        >
          <img
            src={img.src}
            alt=""
            style={{
              width: `${img.size}px`,
              height: `${img.size}px`,
              opacity: img.opacity,
              objectFit: "contain",
            }}
          />
        </div>
      ))}

      <style dangerouslySetInnerHTML={{ __html: generateKeyframesStyles() }} />
    </div>
  );
};

export default BackgroundImages;
