import { crew } from "@kaplayjs/crew";
import kaplay from "kaplay";
import { createCards } from "./card";
import { WOBBLE_ANGLE, SPEED } from "./constants";
import "kaplay/global"; // uncomment if you want to use without the  prefix
import { initWebRTC } from "./multiplayer";

export const k = kaplay({
  plugins: [crew],
  background: "#4e495f",
  scale: 2,
  debugKey: "r",
});

loadRoot("./"); // A good idea for Itch.io publishing later
loadSprite("card", "sprites/card.png");
loadSprite("octo", "sprites/octo.png");
loadSprite("dead", "sprites/dead.png");
loadSprite("triboi", "sprites/triboi.png");
loadSprite("wolfi", "sprites/wolfi.png");
loadSprite("bubble", "sprites/bubble.png");

k.loadCrew("sprite", "cursor");
k.loadCrew("sprite", "pointer");
k.loadCrew("sprite", "kat");
k.loadCrew("sprite", "pineapple");
k.loadCrew("sprite", "been");
k.loadCrew("font", "happy");

setLayers(["game", "hover", "ui"], "game");

const createPlayer = (scravatar: string) => {
  const player = add([
    sprite(scravatar),
    pos(outerWidth / 4, outerWidth / 4),
    anchor("center"),
    area({
      isSensor: true,
    }),
    rotate(),
    animate(),
    named("player"),
    "player",
  ]);

  player.animate("angle", [WOBBLE_ANGLE, -WOBBLE_ANGLE], {
    easing: easings.easeInOutCubic,
    direction: "ping-pong",
    duration: 1,
  });

  const bubble = player.add([sprite("bubble"), anchor("center"), pos(30, -50)]);

  const bubbleText = bubble.add([
    text("9", { font: "happy", size: 24 }),
    pos(-5, -24),
    color(Color.BLACK),
    timer(),
  ]);

  bubble.hidden = true;

  player.on("countdown", () => {
    bubble.hidden = false;
    let time = 9;
    bubbleText.loop(
      1,
      () => {
        if (time === -1) {
          bubble.hidden = true;
        }

        bubbleText.text = time.toString();
        time--;
      },
      11,
    );
  });

  return player;
};

scene("menu", () => {
  add([text("Choose your Scravatar", { font: "happy" })]);
  ["wolfi", "octo", "dead", "triboi"].forEach((image, i) => {
    const selection = add([
      pos(88 * i + 100, 100),
      anchor("center"),
      circle(32, { fill: true }),
      opacity(0.1),
      z(-1),
      area(),
    ]);

    selection.add([
      text(image.toUpperCase(), { font: "happy", size: 14 }),
      anchor("center"),
      pos(0, 40),
    ]);

    const avatar = selection.add([
      sprite(image),
      rotate(),
      animate(),
      anchor("center"),
    ]);

    selection.onHover(() => {
      selection.opacity = 1;
      setCursor("pointer");
    });

    selection.onHoverEnd(() => {
      selection.opacity = 0.1;
      setCursor("default");
    });

    selection.onClick(() => {
      pushScene("game", image);
    }, "left");

    avatar.animate("angle", [WOBBLE_ANGLE, -WOBBLE_ANGLE], {
      easing: easings.easeInOutCubic,
      direction: "ping-pong",
      duration: 1,
    });
  });

  const peerIDToConnect = location.pathname.replace("/", "");
  initWebRTC(peerIDToConnect);
});

scene("game", (scravatar: string) => {
  createCards();
  const player = createPlayer(scravatar);

  onUpdate(() => {
    setCamPos(lerp(getCamPos(), player.pos, 0.1));
  });

  onKeyDown(["w", "up"], () => {
    player.moveBy(0, -SPEED);
  });

  onKeyDown(["a", "left"], () => {
    player.moveBy(-SPEED, 0);
  });

  onKeyDown(["s", "down"], () => {
    player.moveBy(0, SPEED);
  });

  onKeyDown(["d", "right"], () => {
    player.moveBy(SPEED, 0);
  });

  onKeyDown("u", () => {
    player.trigger("countdown");
  });
});

pushScene("menu");
// pushScene("game", "wolfi");