import { Application, Container, Graphics, Text, Ticker } from "pixi.js";

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

function addBoxes(app: Application) {
  const boxes = new Container({ label: "boxes" });
  const width = 100;

  // Box 1 - Red
  const loc1 = { x: app.screen.width / 2 - 150, y: app.screen.height / 2 };
  const box1 = new Graphics({ label: "box1" });
  box1.rect(-width / 2, -width / 2, width, width).fill(0xff0000);
  box1.x = loc1.x;
  box1.y = loc1.y;
  box1.eventMode = "static";
  let box1Selected = false;
  box1.on("click", () => {
    box1Selected = !box1Selected;
    box1.clear();
    box1.rect(-width / 2, -width / 2, width, width).fill(0xff0000);
    if (box1Selected) {
      box1.stroke({ color: 0xffffff, width: 1 });
    }
  });
  boxes.addChild(box1);

  // Box 2 - Blue
  const loc2 = { x: app.screen.width / 2 + 150, y: app.screen.height / 2 };
  const box2 = new Graphics({ label: "box2" });
  box2.rect(-width / 2, -width / 2, width, width).fill(0x0000ff);
  box2.x = loc2.x;
  box2.y = loc2.y;
  box2.eventMode = "static";
  let box2Selected = false;
  box2.on("click", () => {
    box2Selected = !box2Selected;
    box2.clear();
    box2.rect(-width / 2, -width / 2, width, width).fill(0x0000ff);
    if (box2Selected) {
      box2.stroke({ color: 0xffffff, width: 1 });
    }
  });
  boxes.addChild(box2);

  // Box 3 - Green
  const loc3 = { x: app.screen.width / 2, y: app.screen.height / 2 + 200 };
  const box3 = new Graphics({ label: "box3" });
  box3.rect(-width / 2, -width / 2, width, width).fill(0x00ff00);
  box3.x = loc3.x;
  box3.y = loc3.y;
  boxes.addChild(box3);

  box3.eventMode = "static";
  let counter = 0;
  box3.on("click", () => {
    box3.x += 100;
    console.log(`green click! ${counter++}`);
  });

  app.stage.hitArea = app.screen;
  app.stage.eventMode = "static";
  app.stage.on("click", (event) => {
    if (event.target === app.stage) {
      console.log(`background click! ${counter++}`);
    } else {
      console.log(`foreground click! ${counter++}`);
    }
  });
  app.stage.addChild(boxes);

  const keys = new Set<string>();

  window.addEventListener("keydown", (e) => keys.add(e.key));
  window.addEventListener("keyup", (e) => keys.delete(e.key));

  // Reset positions on 'r' key press
  window.addEventListener("keydown", (e) => {
    if (e.key === "r") {
      box1.x = loc1.x;
      box1.y = loc1.y;
      box2.x = loc2.x;
      box2.y = loc2.y;
      box3.x = loc3.x;
      box3.y = loc3.y;
    }
  });

  app.ticker.add(() => {
    const speed = 3;
    if (keys.has("a")) box1.x -= speed;
    if (keys.has("d")) box1.x += speed;
    if (keys.has("w")) box1.y -= speed;
    if (keys.has("s")) box1.y += speed;
  });
}

function addTickerCounter(app: Application) {
  const tickerText = new Text({
    text: "Ticks: 0",
    style: { fill: 0xffffff, fontSize: 20 },
    label: "tickerCounter",
  });
  tickerText.x = 20;
  tickerText.y = 20;
  app.stage.addChild(tickerText);
}

function updateTickerCounter(app: Application, ticker: Ticker) {
  const tickerText = app.stage.getChildByLabel("tickerCounter") as Text;
  if (tickerText) {
    const ticks = Math.floor(ticker.lastTime / (1000 / 60));
    tickerText.text = `Ticks: ${ticks}`;
  }
}

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

  app.ticker.add((ticker) => {
    updateTickerCounter(app, ticker);
  });
})();