var oranges = false;
// module aliases
let Engine = Matter.Engine,
	Render = Matter.Render,
	Runner = Matter.Runner,
	Bodies = Matter.Bodies,
	Events = Matter.Events,
	Body = Matter.Body,
	Composite = Matter.Composite;

class Sketch {
	constructor() {
		// create an engine
		this.engine = Engine.create();
		this.width = window.innerWidth;
		this.height = window.innerHeight;
		this.engine.world.gravity.y = 0;
		// create a renderer
		this.render = Render.create({
			element: document.body,
			engine: this.engine,
			options: {
				width: this.width,
				height: this.height,
				showAngleIndicator: true,
				background: "transparent"
			}
		});

		// create two boxes and a ground
		this.createBodies();
		this.createWall();

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

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

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

		window.addEventListener("resize", () => {
			this.onResize();
		});
		Events.on(runner, "afterTick", () => {
			this.updateHtmlElems();
		});
	}

	updateHtmlElems() {
		if (this.htmlBods) {
			this.htmlBods.map((bod) => {
				bod.update();
			});
		}
	}

	onResize() {
		this.width = window.innerWidth;
		this.height = window.innerHeight;

		this.render.options.height = this.height;
		this.render.options.width = this.width;
		this.render.canvas.height = this.height;
		this.render.canvas.width = this.width;

		Composite.clear(this.engine.world, false);

		// create two boxes and a ground
		this.createBodies();
		this.createWall();
		this.setupMouse();
	}

	setupMouse() {
		// add mouse control
		var mouse = Matter.Mouse.create(this.render.canvas);
		var mouseConstraint = Matter.MouseConstraint.create(this.engine, {
			mouse: mouse,
			constraint: {
				stiffness: 0.2,
				render: {
					visible: false
				}
			}
		});
		Composite.add(this.engine.world, mouseConstraint);

		Events.on(mouseConstraint, "startdrag", (e) => {
			e.body.onClick(true);
		});
		Events.on(mouseConstraint, "enddrag", (e) => {
			this.htmlBods.map((bod) => bod.onClick(false));
		});

		// keep the mouse in sync with rendering
		this.render.mouse = mouse;
	}

	createWall() {
		var wall1 = Bodies.rectangle(this.width / 2, this.height + 30, 1, 1, {
			isStatic: true
		});
		Body.scale(wall1, this.width, 60);
		var wall2 = Bodies.rectangle(this.width / 2, -30, 1, 1, { isStatic: true });
		Body.scale(wall2, this.width, 60);
		var wall3 = Bodies.rectangle(this.width + 30, this.height / 2, 1, 1, {
			isStatic: true
		});
		Body.scale(wall3, 60, this.height);
		var wall4 = Bodies.rectangle(-30, this.height / 2, 1, 1, { isStatic: true });
		Body.scale(wall4, 60, this.height);
		this.walls = [];
		this.walls.push(wall1);
		this.walls.push(wall2);
		this.walls.push(wall3);
		this.walls.push(wall4);
		Composite.add(this.engine.world, this.walls);
	}
	createBodies() {
		var htmlElems = [...document.querySelectorAll(".physicsDiv")];

		var bodies = [];
		this.htmlBods = [];
		htmlElems.map((elem) => {
			elem.style.transform = "";
			elem.style.webkitTransform = "";
			elem.style.msTransform = "";

			elem.classList.remove("abs");
			var b = elem.getBoundingClientRect();
			elem.classList.add("abs");

			var bod = Bodies.rectangle(b.left + b.width / 2, b.top + b.height / 2, 1, 1);
			bod.htmlElementOffset = { top: b.top, left: b.left };
			Body.scale(bod, b.width, b.height);
			bod.frictionAir = 0.2;
			//Body.setDensity(bod, 10);
			bod.htmlElement = elem;

			bod.update = () => {
				elem.classList.remove("abs");
				var b = elem.getBoundingClientRect();
				elem.classList.add("abs");

				var xpos = bod.position.x;
				var ypos = bod.position.y;
				var scale = 1; //;bod.scale.x;

				if (bod.isScaledUp) {
					scale = 3;
				}

				var angle = bod.angle;
				//
				var transform =
					"translate(" +
					elem.offsetWidth / -2 +
					"px, " +
					elem.offsetHeight / -2 +
					"px) translate(" +
					xpos +
					"px, " +
					ypos +
					"px) rotate(" +
					angle +
					"rad) scale3d(" +
					scale +
					"," +
					scale +
					",1)";
				//translate("+(elem.offsetWidth/-2)+"px, "+(elem.offsetHeight/-2)+"px)
				//aconsole.log(transform);

				var sinAng = 2 * Math.sin(bod.angle);
				var cosAng = 2 * Math.cos(bod.angle);

				Body.applyForce(
					bod,
					bod.position,
					Matter.Vector.mult(
						Matter.Vector.sub(
							Matter.Vector.create(this.width / 2, this.height / 2),
							bod.position
						),
						0.00003
					)
				);

				elem.style.transform = transform;
				elem.style.webkitTransform = transform;
				elem.style.msTransform = transform;
			};

			bod.isScaledUp = false;
			bod.onClick = (isDown) => {
				var elem = $(bod.htmlElement);
				if (isDown) {
					if (!bod.isScaledUp) {
						Body.scale(bod, 3, 3);
						elem.find(".dayDescription").addClass("show");
						// $(".date").html(elem.children("time").attr("datetime"));
						$(".date").addClass("show");
						elem.find(".dayDescription").addClass("show");
						elem.find("time").addClass("show");
					}
					bod.isScaledUp = true;
				} else {
					if (bod.isScaledUp) {
						Body.scale(bod, 1 / 3, 1 / 3);
						$(bod.htmlElement).find(".dayDescription").removeClass("show");
						$(".date").removeClass("show");
					}
					bod.isScaledUp = false;
				}
			};

			this.htmlBods.push(bod);
			//var bod = Bodies.rectangle(this.width/2, this.height, this.width, 60, { isStatic: true });
			bodies.push(bod);
		});

		// add all of the bodies to the world
		Composite.add(this.engine.world, bodies);
	}
}
var sketch = null;

document.addEventListener("DOMContentLoaded", () => {
	sketch = new Sketch();
});