import React from 'react';
import GradientWavesBackground from './GradientWavesBackground';
import AuroraBackground from './Aurora';
import BinaryBackground from './Binary';
import BlurryCirclesBackground from './BlurryCircles';
import ConfettiBackground from './Confetti';
import DynamicPatternBackground from './DynamicPattern';
import FirefliesBackground from './Fireflies';
import FireworksBackground from './Fireworks';
import FlamesBackground from './Flames';
import FloatingBubblesBackground from './FloatingBubbles';
import FluidBackground from './Fluid';
import GeometricShapesBackground from './GeometricShapes';
import GradientBackground from './Gradient';
import LavaLampBackground from './LavaLamp';
import MatrixBackground from './Matrix';
import NeonGridBackground from './NeonGrid';
// import ParticleBackground from './Particle';
import RippleEffectBackground from './RippleEffect';
import ShootingStarsBackground from './ShootingStars';
import SnowfallBackground from './Snowfall';
import SpaceBackground from './Space';
import StarryNightBackground from './StarryNight';
import TempleRunBackground from './TempleRun';
import WavesBackground from './Waves';
import { styled } from '@mui/system';
import DemoComponent from './DemoComponent';
import SimplexNoiseBackground from './SimpleNoiseBackground';
import TrippyBackground from "./Trippy"
import CloudsBackground from "./Clouds"
import PaintDripBackground from "./PaintTrip"
import FunZoneBackground from "./FunZone"
import CityBackground from "./City"
import WormholeBackground from "./Wormhole"
import CloudSpiralBackground from "./CloudSpiral"
import HypnosisBackground from "./Hypnosis"
import BubblesBackground from "./Bubbles"
import IceCreamBackground from "./IceCream"
import LinesBackground from "./Lines"
import TrianglesBackground from "./Triangles"
import MeteorShowerBackground from "./MeteorShower"
import IllusionBackground from "./Illusion"
import SpookyMoonBackground from "./SpookyMoon"
import FireworkerBackground from "./Fireworker"
import DotsBackground from "./Dots"
import HaloBackground from "./Halo"
import LeumasLogoBackground from "./LeumasLogo"
import InfinityBackground from "./Infinity"
import SpipaBackground from "./Spipa"
// import Dots2Background from './Dots2';
import NoiseBackground from "./Noise"
const backgrounds = {
  GradientWaves: GradientWavesBackground,
  Aurora: AuroraBackground,
  SimplexNoise: SimplexNoiseBackground,
  BlurryCircles: BlurryCirclesBackground,
  Clouds: CloudsBackground,
    Trippy: TrippyBackground,

    PaintDrip: PaintDripBackground,

    FunZone: FunZoneBackground,
    City: CityBackground,
    Wormhole: WormholeBackground,
    CloudSpiral: CloudSpiralBackground,
    Hypnosis : HypnosisBackground,
    Bubbles: BubblesBackground,
    IceCream: IceCreamBackground,
    Lines: LinesBackground,
    Triangles : TrianglesBackground,
    MeteorShower: MeteorShowerBackground,
    Illusion: IllusionBackground,
    SpookyMoon: SpookyMoonBackground,
    Fireworker: FireworkerBackground,
    Dots: DotsBackground,
    Halo: HaloBackground,
    LeumasLogo: LeumasLogoBackground,
    Infinity: InfinityBackground,
    Spipa: SpipaBackground,
    // Dots2: Dots2Background,
    Noise: NoiseBackground,

//   Confetti: ConfettiBackground,
//   DynamicPattern: (props) => <DynamicPatternBackground {...props} patternUrl={"https://res.cloudinary.com/dx25lltre/image/upload/v1707176122/Leumas/2_t6ap9y.svg"} patternSize="50px" />,
//   Fireflies: FirefliesBackground,
//   Fireworks: FireworksBackground,
//   Flames: FlamesBackground,
//   FloatingBubbles: FloatingBubblesBackground,
//   Fluid: FluidBackground,
//   GeometricShapes: GeometricShapesBackground,
//   Gradient: GradientBackground,
//   LavaLamp: LavaLampBackground,
//   Matrix: MatrixBackground,
//   NeonGrid: NeonGridBackground,
// //   Particle: ParticleBackground,
//   RippleEffect: RippleEffectBackground,
//   ShootingStars: ShootingStarsBackground,
//   Snowfall: SnowfallBackground,
//   Space: SpaceBackground,
//   StarryNight: StarryNightBackground,
//   TempleRun: TempleRunBackground,
//   Waves: WavesBackground,
};

const FullHeightBackground = styled('div')`
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
//   background-color: #111;
`;

const BackgroundDemoContainer = styled('div')`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Align items to the top */
  width: 100%;
  min-height: 100vh;
  z-index: 1;
  position: relative;
  color: white;
  padding: 20px;
  box-sizing: border-box;
`;

const BackgroundList = styled('div')`
  display: flex;
  flex-direction: column; /* Stack items vertically */
  gap: 20px;
  justify-content: center;
  align-items: center;
  width: 100%; /* Full width for each item */
`;

const BackgroundItem = styled('div')`
  width: 100%; /* Full width */
  height: 300px;
  border: 2px solid white;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0; /* Margin on top and bottom */
`;

const BackgroundDemo = () => {
  return (
    <FullHeightBackground>
      <BackgroundDemoContainer>
        <h2>Background Demo</h2>
        <BackgroundList>
          {Object.keys(backgrounds).map((bg) => {
            const BackgroundComponent = backgrounds[bg];
            console.log(`Rendering background: ${bg}`);
            return (
              <BackgroundItem key={bg}>
                <BackgroundComponent>
                  <DemoComponent />
                </BackgroundComponent>
              </BackgroundItem>
            );
          })}
        </BackgroundList>
      </BackgroundDemoContainer>
    </FullHeightBackground>
  );
};

export default BackgroundDemo;