import { Juego, State as AllState } from "./main";
import { Sprite } from "./sprite";
import {
  Box,
  boxCollision,
  drawText,
  isMobile,
  isTouching,
  posInBox,
  randomFromArray,
  share,
} from "./utils";
import * as welcome from "./welcome";

const ENEMIES_NUM = 12;
const SEED_COOLDOWN = 150;
const MAP_MIN = 1000;
const MAP_MAX = 10000;
const MAP_SIZE = MAP_MAX - MAP_MIN;
const SIGNATURES_TO_WIN = 20000;
const CITIZENS = SIGNATURES_TO_WIN / 1000;
const TIME = 2 * 60 * 1000;
const TIME_LOST_WHEN_HIT = 20 * 1000;

type Citizen = { x: number; sprite: Sprite };

export type State = {
  current: "jugando";
  has: "lost" | "won" | null;
  playing: boolean;
  pos: { x: number };
  view: { x: number };
  side: "left" | "right";
  enemies: { x: number; sprite: Sprite }[];
  seeds: { x: number; velocity: { x: number } }[];
  trees: { x: number; sprite: Sprite }[];
  citizens: Citizen[];
  signatures: number;
  justSigned: number;
  time: number;
  seedCooldown: number;
};

export function createJugandoState(juego: Juego<any>): State {
  let citizens = [];
  for (let i = 0; i < CITIZENS; i++) {
    citizens.push({
      x: MAP_MIN + (i + 1) * (MAP_SIZE / CITIZENS),
      sprite: randomFromArray([
        juego.sprites.ciudadanx1,
        juego.sprites.ciudadanx2,
        juego.sprites.ciudadanx3,
      ]),
    });
  }
  return {
    current: "jugando",
    has: null,
    playing: false,
    pos: { x: MAP_MIN + 100 },
    view: { x: 0 },
    side: "right",
    enemies: [],
    seeds: [],
    trees: [],
    signatures: 0,
    citizens,
    justSigned: 0,
    time: TIME,
    seedCooldown: 0,
  };
}

function touchControls(juego: Juego<State>): {
  left: Box;
  right: Box;
  center: Box;
} {
  return {
    left: {
      x: 0,
      y: 0,
      width: juego.canvas.width / 7,
      height: juego.canvas.height,
    },
    right: {
      x: juego.canvas.width - juego.canvas.width / 7,
      y: 0,
      width: juego.canvas.width / 7,
      height: juego.canvas.height,
    },
    center: {
      x: juego.canvas.width / 7,
      y: 0,
      width: juego.canvas.width - (juego.canvas.width / 7) * 2,
      height: juego.canvas.height,
    },
  };
}

function shareButton(juego: Juego<State>): {
  box: Box;
  sprite: Sprite;
} {
  const sprite =
    juego.state.has === "won"
      ? juego.sprites.botonCompartirFelicitaciones
      : juego.sprites.botonCompartirPerdiste;

  const width = sprite.getWidth(juego);
  const height = sprite.getHeight(juego);
  return {
    box: {
      x: juego.canvas.width - width - 5,
      y: juego.canvas.height * 0.85 - height,
      width,
      height,
    },
    sprite,
  };
}

const socialUrls = {
  facebook: "https://www.facebook.com/Fpg.caba",
  instagram: "https://www.instagram.com/fpg.caba/",
  twitter: "https://twitter.com/FtePatriaGrande",
};
function socialButtons(juego: Juego<State>): {
  [key in "facebook" | "instagram" | "twitter"]: {
    box: Box;
    sprite: Sprite;
  };
} {
  let x = juego.canvas.width - 5;
  let s: any = {};
  for (const network of ["facebook", "instagram", "twitter"]) {
    const sprite = (juego.sprites as { [key in string]: Sprite })[network];
    const width = sprite.getWidth(juego);
    const height = sprite.getHeight(juego);
    x -= width + 20;
    s[network] = {
      box: {
        x,
        y: juego.canvas.height * 0.95 - height,
        width,
        height,
      },
      sprite,
    };
  }
  return s;
}

export function update(juego: Juego<State>, dt: number) {
  if (juego.state.has) {
    const button = shareButton(juego);
    if (
      isTouching(juego, button.box) ||
      (juego.mouse.down && posInBox(button.box, juego.mouse))
    ) {
      share();
      (juego as Juego<AllState>).state = welcome.createState();
    }
    for (const [network, { box }] of Object.entries(socialButtons(juego))) {
      if (
        isTouching(juego, box) ||
        (juego.mouse.down && posInBox(box, juego.mouse))
      ) {
        location.href = (socialUrls as any)[network];
      }
    }
    return;
  }

  if (!juego.state.playing) {
    juego.assets.fondo.play();
    juego.state.playing = true;
  }

  juego.state.time -= dt;
  if (juego.state.time < 0) {
    juego.state.has = "lost";
    return;
  }

  const playerSpeed = juego.canvas.width * 0.15;
  const enemySpeed = juego.canvas.width * 0.05;
  const { left, right, center } = touchControls(juego);
  if (
    juego.keyboard.keys.d ||
    juego.keyboard.keys.ArrowRight ||
    isTouching(juego, right)
  ) {
    juego.state.side = "right";
    juego.state.pos.x += (dt / 1000) * playerSpeed;
  }
  if (
    juego.keyboard.keys.a ||
    juego.keyboard.keys.ArrowLeft ||
    isTouching(juego, left)
  ) {
    juego.state.side = "left";
    juego.state.pos.x -= (dt / 1000) * playerSpeed;
  }

  if (juego.state.pos.x < MAP_MIN) juego.state.pos.x = MAP_MIN;
  if (juego.state.pos.x > MAP_MAX) juego.state.pos.x = MAP_MAX;

  juego.state.seedCooldown -= dt;
  juego.state.justSigned -= dt;

  const citizen = detectCitizen(juego);

  if (juego.keyboard.keys[" "] || isTouching(juego, center)) {
    if (citizen) {
      juego.state.signatures += 1000;
      juego.state.citizens = juego.state.citizens.filter((c) => c != citizen);
      juego.state.justSigned = 1000;
    } else {
      if (juego.state.seedCooldown < 0) {
        const seedSpeed = juego.canvas.width * 0.7;
        juego.state.seeds.push({
          x: juego.state.pos.x,
          velocity: { x: juego.state.side === "left" ? -seedSpeed : seedSpeed },
        });
      }
    }
    juego.state.seedCooldown = SEED_COOLDOWN;
  }

  for (const seed of juego.state.seeds) {
    seed.x += (dt / 1000) * seed.velocity.x;
    seed.velocity.x *= 0.97;
    for (const enemy of juego.state.enemies) {
      if (
        boxCollision(
          getFlooredBox(juego, juego.sprites.semilla, seed.x),
          getFlooredBox(juego, enemy.sprite, enemy.x)
        )
      ) {
        juego.state.seeds = juego.state.seeds.filter((s) => s.x !== seed.x);
        juego.state.enemies = juego.state.enemies.filter(
          (e) => e.x !== enemy.x
        );
        juego.state.trees.push({
          x: enemy.x,
          sprite: randomFromArray([juego.sprites.arbol1, juego.sprites.arbol2]),
        });
      }
    }
    if (Math.abs(seed.velocity.x) < 100)
      juego.state.seeds = juego.state.seeds.filter(
        (s) => s.velocity.x !== seed.velocity.x
      );
  }

  if (juego.state.signatures >= SIGNATURES_TO_WIN) {
    juego.state.has = "won";
    return;
  }

  while (juego.state.enemies.length < ENEMIES_NUM) {
    const x = Math.random() * 6000 + juego.state.pos.x;
    // Don't spawn enemies too close
    if (Math.abs(juego.state.pos.x - x) < 300) continue;
    juego.state.enemies.push({
      x,
      sprite: randomFromArray([
        juego.sprites.larreta,
        juego.sprites.millonarioMalo,
      ]),
    });
  }

  for (const enemy of juego.state.enemies) {
    const distance = enemy.x - juego.state.pos.x;
    if (distance < 0) {
      enemy.x += (dt / 1000) * enemySpeed;
    } else {
      enemy.x -= (dt / 1000) * enemySpeed;
    }

    if (
      boxCollision(
        getFlooredBox(juego, juego.sprites.jugadorx, juego.state.pos.x),
        getFlooredBox(juego, enemy.sprite, enemy.x)
      )
    ) {
      juego.state.enemies = juego.state.enemies.filter((e) => e.x !== enemy.x);
      juego.state.time -= TIME_LOST_WHEN_HIT;
    }
  }

  juego.state.view.x =
    -juego.state.pos.x +
    juego.canvas.width / 2 -
    juego.sprites.jugadorx.getWidth(juego) / 2;
}

function getFlooredBox(juego: Juego<State>, sprite: Sprite, x: number): Box {
  const height = sprite.getHeight(juego);
  return {
    x,
    y: getFloorY(juego) - height,
    width: sprite.getWidth(juego),
    height,
  };
}

function detectCitizen(juego: Juego<State>): Citizen | undefined {
  const jugadorxBox = getFlooredBox(
    juego,
    juego.sprites.jugadorx,
    juego.state.pos.x
  );
  return juego.state.citizens.find((c) =>
    boxCollision(jugadorxBox, getFlooredBox(juego, c.sprite, c.x))
  );
}

function drawJugadorx(juego: Juego<State>) {
  const floorY = getFloorY(juego);
  const width = juego.sprites.jugadorx.getWidth(juego);
  const height = juego.sprites.jugadorx.getHeight(juego);
  juego.sprites.jugadorx.draw(
    juego,
    juego.state.pos.x + juego.state.view.x,
    floorY - height,
    0,
    juego.state.side === "left"
  );
  if (juego.state.justSigned > 0) {
    juego.sprites.dialogoFirma.draw(
      juego,
      juego.state.pos.x + juego.state.view.x + width,
      floorY - height - juego.sprites.dialogoFirma.getHeight(juego)
    );
  }
}

function drawTrees(juego: Juego<State>) {
  const floorY = getFloorY(juego);
  for (const tree of juego.state.trees) {
    const height = tree.sprite.getHeight(juego);
    tree.sprite.draw(juego, tree.x + juego.state.view.x, floorY - height);
  }
}
function drawEnemies(juego: Juego<State>) {
  const floorY = getFloorY(juego);
  for (const enemy of juego.state.enemies) {
    const height = enemy.sprite.getHeight(juego);
    enemy.sprite.draw(juego, enemy.x + juego.state.view.x, floorY - height);
  }
}
function drawCitizens(juego: Juego<State>) {
  const floorY = getFloorY(juego);
  for (const citizen of juego.state.citizens) {
    const height = citizen.sprite.getHeight(juego);
    citizen.sprite.draw(juego, citizen.x + juego.state.view.x, floorY - height);
  }
}

function drawSeeds(juego: Juego<State>) {
  const height = juego.sprites.semilla.getHeight(juego);
  const floorY = getFloorY(juego);
  for (const seed of juego.state.seeds) {
    juego.sprites.semilla.draw(
      juego,
      seed.x + juego.state.view.x,
      floorY - height
    );
  }
}

function getFloorY(juego: Juego<State>): number {
  return (juego.canvas.height * 65) / 96;
}

export function drawBackground(
  juego: Juego<AllState>,
  y: number,
  height: number,
  img: HTMLImageElement,
  offset: number = 0,
  sourceBox?: Box,
  opacity?: number
) {
  const aspect = img.width / img.height;
  const width = height * aspect;
  if (opacity !== undefined) {
    juego.ctx.globalAlpha = opacity;
  }
  for (let i = 0; i < 50; i++) {
    if (sourceBox) {
      juego.ctx.drawImage(
        img,
        sourceBox.x,
        sourceBox.y,
        sourceBox.width,
        sourceBox.height,
        i * (width - (opacity === undefined ? 1 : 0)) + offset,
        y,
        width,
        height
      );
    } else {
      juego.ctx.drawImage(
        img,
        i * (width - (opacity === undefined ? 1 : 0)) + offset,
        y,
        width,
        height
      );
    }
  }
  if (opacity !== undefined) {
    juego.ctx.globalAlpha = 1;
  }
}

export function draw(juego: Juego<State>, timestamp: number) {
  drawBackground(
    juego,
    0,
    juego.canvas.height,
    juego.assets.cieloRioCalle,
    -juego.state.pos.x
  );
  drawBackground(
    juego,
    0,
    getFloorY(juego),
    juego.assets.edificios,
    -juego.state.pos.x,
    {
      x: 0,
      y: 0,
      width: 89,
      height: 48,
    }
  );

  drawBackground(
    juego,
    0,
    juego.canvas.height,
    juego.assets.cielo,
    -juego.state.pos.x,
    undefined,
    juego.state.signatures / SIGNATURES_TO_WIN
  );
  drawBackground(
    juego,
    0,
    juego.canvas.height,
    juego.assets.parquePublicoRio,
    -juego.state.pos.x,
    undefined,
    juego.state.signatures / SIGNATURES_TO_WIN
  );

  drawTrees(juego);
  drawCitizens(juego);
  drawEnemies(juego);

  drawJugadorx(juego);
  drawSeeds(juego);

  if (isMobile(juego) && !juego.state.has) {
    const { left, right } = touchControls(juego);

    juego.ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
    juego.ctx.fillRect(left.x, left.y, left.width, left.height);
    juego.ctx.fillRect(right.x, right.y, right.width, right.height);

    const width = juego.sprites.flecha.getWidth(juego);
    const height = juego.sprites.flecha.getHeight(juego);
    juego.sprites.flecha.draw(
      juego,
      left.x + left.width - width,
      left.height / 2 - height / 2,
      0,
      false
    );
    juego.sprites.flecha.draw(
      juego,
      right.x,
      right.height / 2 - height / 2,
      0,
      true
    );
  }

  juego.ctx.fillStyle = "white";
  const firmasBox = drawText(
    juego,
    `Firmas: ${juego.state.signatures}/${SIGNATURES_TO_WIN}`,
    { x: juego.canvas.width - 10, y: 10 },
    { bold: true, align: "right" }
  );

  const tiempoBox = drawText(
    juego,
    `Tiempo restante`,
    { x: 10, y: 10 },
    { bold: false, align: "left" }
  );

  juego.ctx.fillRect(
    10,
    tiempoBox.y + tiempoBox.height,
    (juego.canvas.width - firmasBox.width - 20) * (juego.state.time / TIME),
    30
  );

  if (detectCitizen(juego)) {
    drawText(
      juego,
      `¡Apreta para recolectar firmas!`,
      { x: juego.canvas.width / 2, y: juego.canvas.height * 0.7 },
      { align: "center", maxWidth: juego.canvas.width }
    );
  }

  if (juego.state.has) {
    juego.sprites.logoFPGFDTBlanco.draw(
      juego,
      0,
      juego.canvas.height - juego.sprites.logoFPGFDTBlanco.getHeight(juego) - 10
    );
    if (juego.state.has === "lost") {
      juego.sprites.placaPerdiste.draw(juego, 10, juego.canvas.height * 0.1);
      juego.sprites.baldosa.draw(
        juego,
        juego.canvas.width - juego.sprites.baldosa.getWidth(juego) - 30,
        juego.canvas.height * 0.3
      );
    } else if (juego.state.has === "won") {
      const width = juego.sprites.placaFelicitaciones.getWidth(juego);
      juego.sprites.placaFelicitaciones.draw(
        juego,
        juego.canvas.width / 2 - width / 2,
        juego.canvas.height * 0.1
      );
    }
    const button = shareButton(juego);
    button.sprite.draw(juego, button.box.x, button.box.y);
    const socials = socialButtons(juego);
    for (const { sprite, box } of Object.values(socials)) {
      sprite.draw(juego, box.x, box.y);
    }
  }
}