window.addEventListener("DOMContentLoaded",() => {
	const sawSwitch = new SawSwitch(".saw-switch");
});

class SawSwitch {
	constructor(el) {
		this.el = document.querySelector(el);
		this.input = this.el.querySelector(".saw-switch__input");
		this.touching = false;
		this.cursor = {
			x: 0,
			y: 0
		};
		this.isMobile = "ontouchstart" in document.documentElement;

		if (this.el) {
			this.el.addEventListener(this.isMobile ? "touchmove" : "mousemove",this.updateCursor.bind(this));
			this.el.addEventListener(this.isMobile ? "touchend" : "mouseout",this.stopBlood.bind(this));
		}
	}
	updateCursor(e) {
		const event = this.isMobile ? e.touches[0] : e;
		// coords
		this.cursor.x = event.pageX;
		this.cursor.y = event.pageY;
		const {x,y} = this.cursor;
		// bounds of the switch
		const bounds = this.el.getBoundingClientRect();
		const {top,left,width,height} = bounds;
		// collision
		const outsideX = x < left || x > left + width;
		const outsideY = y < top || y > top + height;
		const outsideSwitch = outsideX || outsideY;
		const withinX = x >= left + width * (1 / 8) && x <= left + width * (7 / 8);
		const withinY = y >= top + height * (1 / 5) && y <= top + height * (4 / 5);
		const withinBlades = withinX && withinY;

		if (this.input.checked && !outsideSwitch && !withinBlades) {
			if (!this.touching) {
				this.touching = true;
				this.drawBlood();
			}

		} else {
			this.touching = false;
		}
	}
	drawBlood() {
		if (this.touching && this.input.checked) {
			this.createParticle(this.cursor.x,this.cursor.y);
			requestAnimationFrame(this.drawBlood.bind(this));
		}
	}
	stopBlood() {
		this.touching = false;
	}
	randomInt(min,max) {
		return Math.round(Math.random() * (max - min)) + min;
	}
	createParticle(x,y) {
		const particle = document.createElement("span");
		particle.className = "saw-switch__particle";
		this.el.appendChild(particle);

		const size = this.randomInt(1,6) * 0.1;
		const maxD = 5;

		particle.style.width = `${size}em`;
		particle.style.height = `${size}em`;

		const dx = +((Math.random() - 0.5) * maxD).toFixed(2);
		const dy = +((Math.random() - 0.5) * maxD).toFixed(2);
		const anim = particle.animate(
			[
				{
					transform: `translate(${x}px,${y}px) scale(1)`,
					opacity: 1
				},
				{
					transform: `translate(calc(${x}px + ${dx}em),calc(${y}px + ${dy}em)) scale(0)`,
					opacity: 1
				}
			], {
				duration: this.randomInt(250,300),
				easing: "ease-out",
				delay: this.randomInt(0,50)
			}
		);

		anim.onfinish = () => {
			particle.remove();
		};
	}
}