import {
  Engine,
  Render,
  Runner,
  Bodies,
  Composite,
  Body,
  Constraint,
} from "matter-js";

/*var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;

var engine, mybox;

function setup() {
  createCanvas(400, 400);
  engine = Engine.create();
  mybox = Bodies.rectangle(200,200,80,80);
  World.add(engine.world, [mybox]);
  console.log(mybox);
  Matter.Runner.run(engine);
}

function draw() {
  background(45);
  rect(mybox.position.x, mybox.position.y, 80, 80);
}*/

// create an engine
const engine = Engine.create();

// create a renderer
const render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    showCollisions: true,
    showStats: true,
  },
});

console.log(document);

// create two boxes and a ground
const test = Composite.create({ label: "test" });
const group = Body.nextGroup(true);

var boxA = Bodies.rectangle(200, 200, 80, 80, {
  density: 0.005,
  collisionFilter: {
    group: group,
  },
});
var boxB = Bodies.rectangle(200, 200, 200, 200, {
  angle: 45,
  collisionFilter: {
    group: group,
  },
});

const con = Constraint.create({
  bodyA: boxA,
  bodyB: boxB,
  length: 30,
  stiffness: 0.005,
  damping: 0.02,
});

Composite.add(test, boxA);
Composite.add(test, boxB);
Composite.add(test, con);

var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

// add all of the bodies to the world
Composite.add(engine.world, [test, ground]);

// run the renderer
Render.run(render);

// create runner
var runner = Runner.create();

// run the engine
Runner.run(runner, engine);