// Registers the LUME HTML elements with the browser.
LUME.useDefaultNames();

const { Element, element, html, reactive, numberAttribute } = LUME;

const size = 50;

@element("codepen-cube")
class CodepenCube extends Element {
	root = this;

	@reactive @numberAttribute(100) size = 100;

	@reactive rotation = 0;

	// prettier-ignore
	template = () =>  html`
		<div Xstyle=${() => ({width: this.size+'px', height: this.size + 'px'})}>
			<lume-scene ref=${s => this.scene = s} touch-action="none">
				<lume-node rotation=${() => [1, this.rotation, 1]} align="0.5 0.5" size="0 0 0">
					<lume-node id="cube-face1" class="front"  position=${() => [0, 0, this.size/2]}  rotation="0 0 0"   size=${() => [this.size, this.size, 0]} mount-point="0.5 0.5" align="0.5 0.5 0.5"></lume-node>
					<lume-node id="cube-face2" class="back"   position=${() => [0, 0, -this.size/2]} rotation="0 180 0" size=${() => [this.size, this.size, 0]} mount-point="0.5 0.5" align="0.5 0.5 0.5"></lume-node>
					<lume-node id="cube-face3" class="left"   position=${() => [-this.size/2, 0, 0]} rotation="0 -90 0" size=${() => [this.size, this.size, 0]} mount-point="0.5 0.5" align="0.5 0.5 0.5"></lume-node>
					<lume-node id="cube-face4" class="right"  position=${() => [this.size/2, 0, 0]}  rotation="0 90 0"  size=${() => [this.size, this.size, 0]} mount-point="0.5 0.5" align="0.5 0.5 0.5"></lume-node>
					<lume-node id="cube-face5" class="top"    position=${() => [0, -this.size/2, 0]} rotation="-90 0 0" size=${() => [this.size, this.size, 0]} mount-point="0.5 0.5" align="0.5 0.5 0.5"></lume-node>
					<lume-node id="cube-face6" class="bottom" position=${() => [0, this.size/2, 0]}  rotation="90 0 0"  size=${() => [this.size, this.size, 0]} mount-point="0.5 0.5" align="0.5 0.5 0.5"></lume-node>
				</lume-node>
			</lume-scene>
		</div>
	`

	css = /* css */ `
		div {width: 100%; height: 100%}
    `;

	task;

	connectedCallback() {
		super.connectedCallback();

		const { Motor } = LUME;

		// Keeps the last two pointermove clientX values
		let xStack = [0, 0];

		function addX(x) {
			xStack.shift();
			xStack.push(x);
		}

		let isDragging = false;

		this.scene.addEventListener("pointerdown", (event) => {
			isDragging = true;
			addX(event.clientX);
		});

		let scheduled = false;

		this.scene.addEventListener("pointermove", (event) => {
			if (!isDragging) return;

			console.log("move!", event.clientX, event.movementX);

			const lastX = xStack[1];
			const delta = event.clientX - lastX;
			addX(event.clientX);

			this.rotation += delta * 0.2;
		});

		this.scene.addEventListener("pointerup", (event) => {
			if (!isDragging) return;
			isDragging = false;

			const secondToLastX = xStack[0];
			let delta = event.clientX - secondToLastX;

			console.log(
				"stopped drag",
				event.clientX,
				event.movementX,
				secondToLastX,
				delta
			);

			if (delta !== 0) {
				console.log("keep spinning!");
				// if the mouse was dragged (not just a click)
				const direction = Math.abs(delta) / delta;
				const deceleration = 1.5;

				Motor.removeRenderTask(this.task);

				this.task = Motor.addRenderTask(() => {
					console.log("spin");
					if (delta > deceleration * 2) {
						delta -= deceleration;
					} else if (delta < -deceleration * 2) {
						delta += deceleration;
					} else {
						Motor.removeRenderTask(this.task);

						this.task = Motor.addRenderTask(() => {
							this.rotation += direction * Math.abs(delta) * 0.005;
						});
					}

					this.rotation += delta * 0.2;
				});
			}
		});
	}
}