// This serves no purpose other than to trigger codepen to use <script type="module">
// import {} from 'http://blah.com/blahblah.js';

const {
	Node,
	element,
	html,
	reactify,
	Motor,
	autorun,
	numberAttribute,
	stringAttribute
} = LUME;

// Make the default LUME 3D elements available with their default names.
LUME.useDefaultNames();

const { variable } = LUME;

export class ScrollFling {
	x = variable(0);
	y = variable(0);
	deltaX = 0;
	deltaY = 0;

	constructor({
		target = document,
		initialX = 0,
		initialY = 0,
		minX = -Infinity,
		maxX = Infinity,
		minY = -Infinity,
		maxY = Infinity
	}) {
		this.__target = target;

		this.x(initialX);
		this.y(initialY);
	}

	__onWheel = (event) => {
		event.preventDefault();

		this.deltaX = event.deltaX;
		this.deltaY = event.deltaY;

		this.x(clamp(this.x() + this.deltaX, minX, maxX));
		this.y(clamp(this.y() + this.deltaY, minY, maxY));
		console.log(minY, this.y());

		if (this.deltaX === 0 && this.deltaY === 0) return;

		if (this.__task) Motor.removeRenderTask(this.__task);

		let dx = this.deltaX;
		let dy = this.deltaY;

		// slow the rotation down based on former drag speed
		this.__task = Motor.addRenderTask(() => {
			dx = dx * 0.95;
			dy = dy * 0.95;

			this.x(clamp(this.x() + dx, minX, maxX));
			this.y(clamp(this.y() + dy, minY, maxY));

			// stop rotation once the deltas are small enough that we
			// no longer notice a change.
			if (Math.abs(dx) < 0.01 && Math.abs(dy) < 0.01) return false;
		});
	};

	// TODO switch to Pointer Events

	start() {
		this.__target.addEventListener("wheel", this.__onWheel);
		return this;
	}

	stop() {
		this.__target.removeEventListener("wheel", this.__onWheel);
		return this;
	}
}

@element("camera-rig")
export class CameraRig extends Node {
	@numberAttribute(0) initialPolarAngle = 0;
	@numberAttribute(-90) minPolarAngle = -90;
	@numberAttribute(90) maxPolarAngle = 90;
	@numberAttribute(1000) initialDistance = 1000;
	@numberAttribute(200) minDistance = 200;
	@numberAttribute(2000) maxDistance = 2000;

	template = () => html`
		<lume-node
			size="1 1 1"
			rotation=${() => LUME.untrack(() => [this.initialPolarAngle, 0, 0])}
			size-mode="proportional proportional proportional"
		>
			<lume-perspective-camera
				ref=${(cam) => (this.cam = cam)}
				active
				position=${() => LUME.untrack(() => [0, 0, this.initialDistance])}
				align="0.5 0.5 0.5"
				far="10000"
			></lume-perspective-camera>
		</lume-node>
	`;

	connectedCallback() {
		super.connectedCallback();

		// Uses initial attribute values only, changes not tracked at the moment.
		flingRotation({
			interactionInitiator: this.scene,
			rotationYTarget: this,
			minFlingRotationX: this.minPolarAngle,
			maxFlingRotationX: this.maxPolarAngle
		});

		this.scrollFling = new ScrollFling({
			target: this.scene,
			initialY: this.cam.position.z,
			initialY: this.initialDistance,
			minY: this.minDistance,
			maxY: this.maxDistance
		}).start();

		autorun(() => {
			this.scrollFling.y();
			LUME.untrack(() => {
				this.cam.position.z = this.scrollFling.y();
			});
		});
	}

	disconnectedCallback() {
		super.disconnectedCallback();
		this.scrollFling.stop();
	}
}

@element("flickering-orbs")
export class FlickeringOrbs extends Node {
	@numberAttribute(0) shadowBias = 0;

	template = () => html`
		<>
			<flickering-orb color="yellow" position="500 0 0" attr:shadow-bias=${() =>
				this.shadowBias}></flickering-orb>
			<flickering-orb color="deeppink" position="-500 0 0" attr:shadow-bias=${() =>
				this.shadowBias}></flickering-orb>
			<flickering-orb color="cyan" position="0 0 500" attr:shadow-bias=${() =>
				this.shadowBias}></flickering-orb>
			<flickering-orb color="limegreen" position="0 0 -500" attr:shadow-bias=${() =>
				this.shadowBias}></flickering-orb>
			<flickering-orb color="white" position="0 -500 0" attr:shadow-bias=${() =>
				this.shadowBias}></flickering-orb>
			<flickering-orb color="white" position="0 250 0" attr:shadow-bias=${() =>
				this.shadowBias}></flickering-orb>
		</>
	`;
}

// customElements.define("flickering-orbs", FlickeringOrbs);

@element("flickering-orb")
export class FlickeringOrb extends Node {
	@stringAttribute("royalblue") color = "royalblue";
	@numberAttribute(1.3) intensity = 1.3;
	@numberAttribute(0) shadowBias = 0;

	template = () => html`
		<lume-point-light
			ref=${(l) => (this.light = l)}
			attr:color=${() => this.color}
			attr:intensity=${() => this.intensity}
			attr:shadow-bias=${() => this.shadowBias}
			distance="10000"
		>
			<lume-sphere
				ref=${(s) => (this.sphere = s)}
				has="basic-material"
				attr:color=${() => this.color}
				opacity="0.5"
				mount-point="0.5 0.5 0.5"
				size="10 10 10"
				cast-shadow="false"
				receive-shadow="false"
			></lume-sphere>
		</lume-point-light>
	`;

	connectedCallback() {
		super.connectedCallback();

		const initialIntensity = this.intensity;
		const initialOpacity = this.opacity;

		// Prior art: https://www.instructables.com/Realistic-Fire-Effect-with-Arduino-and-LEDs/
		const flickerFunction = () => {
			const flicker = (Math.random() - 1) * 0.4;
			this.light.intensity = initialIntensity + flicker;
			this.sphere.opacity = initialOpacity + flicker;

			setTimeout(() => Motor.once(flickerFunction), Math.random() * 100);
		};

		Motor.once(flickerFunction);
	}
}

// customElements.define("flickering-orb", FlickeringOrb);

export function flingRotation({
	// The object that will be rotated on Y.
	rotationYTarget,
	// The object that will be rotated on X. Defaults to the element inside the rotationYTarget (it's like a gimball).
	rotationXTarget = rotationYTarget.children[0],
	// The element on which the pointer should be placed down on in
	// order to initiate drag tracking. This defaults to rotationXTarget.
	interactionInitiator = rotationXTarget,
	// The X rotation can not go below this value. Defaults to -90
	// which means facing straight up.
	minFlingRotationX = -90,
	// The X rotation can not go above this value. Defaults to 90 which
	// means facing straight down.
	maxFlingRotationX = 90,
	// The area in which drag tacking will happen. Defaults to document
	// because usually you want to track in the whole viewport, otherwise
	// if the pointer comes up outside of this area it will leave things
	// in a bad state.
	interactionContainer = document
}) {
	interactionInitiator.addEventListener("pointercancel", () => console.log('POINTER CANCEL'))
	
	interactionInitiator.addEventListener("pointerdown", () => {
		// Stop rotation if any.
		rotationYTarget.rotation = () => false;

		let deltaX = 0;
		let deltaY = 0;

		const onMove = (event) => {
			deltaX = event.movementY * 0.2;
			rotationXTarget.rotation.x = clamp(
				rotationXTarget.rotation.x + deltaX,
				minFlingRotationX,
				maxFlingRotationX
			);
			deltaY = -event.movementX * 0.2;
			rotationYTarget.rotation.y += deltaY;
		};

		interactionContainer.addEventListener("pointermove", onMove);

		interactionContainer.addEventListener(
			"pointerup",
			() => {
				// stop dragging
				interactionContainer.removeEventListener("pointermove", onMove);

				if (deltaX === 0 && deltaY === 0) return;

				// slow the rotation down based on former drag speed
				rotationXTarget.rotation = (x, y, z) => {
					deltaX = deltaX * 0.95;

					// stop rotation once the delta is small enough that we
					// no longer notice the rotation.
					if (Math.abs(deltaX) < 0.01) return false;

					return [clamp(x + deltaX, minFlingRotationX, maxFlingRotationX), y, z];
				};
				rotationYTarget.rotation = (x, y, z) => {
					deltaY = deltaY * 0.95;

					// stop rotation once the delta is small enough that we
					// no longer notice the rotation.
					if (Math.abs(deltaY) < 0.01) return false;

					return [x, y + deltaY, z];
				};
			},
			{ once: true }
		);
	});
}

export function clamp(n, min, max) {
	return Math.max(Math.min(n, max), min);
}

// Run code only if this script is running in this pen. Otherwise other pens may import the above.
if (document.querySelector("#YzGbeKG")) {
	lights.rotation = (x, y, z) => [x, y + 0.2, z];
}