import {
  Application,
  Graphics,
  Texture,
  Particle,
  ParticleContainer,
  Rectangle,
} from "pixi.js";

async function setup(app: Application) {
  await app.init({ background: "#111111", resizeTo: window, antialias: true });
  document.getElementById("pixi-container")!.appendChild(app.canvas);
}

(async () => {
  const app = new Application();
  await setup(app);

  const box = new Graphics();
  const left = 100;
  const right = 1000;
  const top = 100;
  const bottom = 1000;

  box.rect(left, top, right - left, bottom - top);
  box.setStrokeStyle({ color: 0xffffff, width: 2 });
  box.stroke();
  app.stage.addChild(box);

  const circle = new Graphics();
  circle.circle(0, 0, 5);
  circle.setFillStyle({ color: 0xffffff });
  circle.fill();

  const texture: Texture = app.renderer.generateTexture(circle);

  // Particle container
  const particleContainer = new ParticleContainer({
    boundsArea: new Rectangle(left, top, right - left, bottom - top),
    dynamicProperties: {
      position: true,
    },
  });

  app.stage.addChild(particleContainer);

  const dotCount = 10000;

  const dots = Array.from({ length: dotCount }, () => {
    const vx = (Math.random() < 0.5 ? -1 : 1) * (0.5 + Math.random() * 1.5);
    const vy = (Math.random() < 0.5 ? -1 : 1) * (0.5 + Math.random() * 1.5);

    const particle = new Particle({
      texture,
      anchorX: 0.5,
      anchorY: 0.5,
    });

    return {
      x: Math.random() * (right - left) + left,
      y: Math.random() * (bottom - top) + top,
      vx,
      vy,
      particle,
    };
  });

  for (const dot of dots) {
    particleContainer.addParticle(dot.particle);
  }

  app.ticker.add((ticker) => {
    const dt = ticker.deltaTime;
    const speed = 1;

    for (const dot of dots) {
      if (dot.x < left) dot.vx *= -1;
      if (dot.x > right) dot.vx *= -1;
      if (dot.y < top) dot.vy *= -1;
      if (dot.y > bottom) dot.vy *= -1;

      dot.x += speed * dot.vx * dt;
      dot.y += speed * dot.vy * dt;

      dot.particle.x = dot.x;
      dot.particle.y = dot.y;
    }
  });
})();