/*
matterjs -
https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.0/matter.min.js

tailwind - 
https://cdn.tailwindcss.com
*/

const { Engine, Render, Body, Bodies, Composite } = Matter;
const engine = Engine.create();

// particle vars
let particleGraphic, particleBody;
const particleRadius = 25;
const particleHolder = document.querySelector("#particleHolder");

// svg variables
const viewportWidth = 400;
const viewportHeight = 400;
const w = 400;
const h = 400;
const namespace = "http://www.w3.org/2000/svg";

// boundaries
let leftwall, rightwall, floor;
const wallThickness = 100;

function initSVG() {
  const svg = document.querySelector("svg");
  svg.setAttribute("width", `${viewportWidth}`);
  svg.setAttribute("height", `${viewportHeight}`);
  svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
  const bg = document.querySelector("#bg");
  bg.setAttribute("width", w);
  bg.setAttribute("height", h);
  bg.setAttribute("fill", "#eaeaea");
}

function initRenderer() {
  // create renderer
  const rendererHolder = document.querySelector("#rendererHolder");
  const render = Render.create({
    element: rendererHolder,
    engine: engine,
    options: {
      width: w,
      height: h,
      showAngleIndicator: true
    }
  });

  Render.run(render);
}

function initParticle() {
  // dimensions, etc
  const xpos = w / 2;
  const ypos = -particleRadius;
  const sides = 5;
  const radius = particleRadius;
  const restitution = 0.7;
  const color = "red";

  // body
  particleBody = Bodies.polygon(0, 0, sides, radius, {
    id: `polygon`,
    friction: 1,
    restitution: restitution,
    isStatic: false
  });
  // get all the verticies so we can use them to create the svg polygon
  const vertices = particleBody.vertices;

  // graphic
  particleGraphic = getPolygonGraphic(vertices, color);
  particleHolder.appendChild(particleGraphic);

  // give the body an initial random rotation and position
  Body.setAngle(particleBody, Math.random() * 2 * Math.PI);
  Body.setPosition(particleBody, { x: xpos, y: ypos });
}

function getPolygonGraphic(vertices, color = "black") {
  let points = "";

  vertices.forEach((vertex) => {
    points = `${points} ${vertex.x},${vertex.y}`;
  });

  const pg = document.createElementNS(namespace, "polygon");
  pg.setAttribute("points", points);
  pg.setAttribute("fill", color);

  const g = document.createElementNS(namespace, "g");
  g.appendChild(pg);

  return g;
}

function initWallAndFloor() {
  floor = Bodies.rectangle(w / 2, h + wallThickness / 2, w, wallThickness, {
    isStatic: true,
    id: "floor"
  });

  leftwall = Bodies.rectangle(-wallThickness / 2, h / 2, wallThickness, h, {
    isStatic: true,
    id: "leftwall"
  });

  rightwall = Bodies.rectangle(w + wallThickness / 2, h / 2, wallThickness, h, {
    isStatic: true,
    id: "righttwall"
  });
}

function initWorld() {
  Composite.add(engine.world, [particleBody, leftwall, rightwall, floor]);
}

function update() {
  Engine.update(engine);

  const pos = particleBody.position;
  const radians = particleBody.angle;
  const degrees = (radians * 180) / Math.PI;

  particleGraphic.setAttribute(
    "transform",
    `translate(${pos.x} ${pos.y}) rotate(${degrees})`
  );

  window.requestAnimationFrame(update);
}

initSVG();
initRenderer();
initParticle();
initWallAndFloor();
initWorld();
update();