(function () {
	const image = document.querySelector(".myPreview__image");

	function toCssMatrix(transform) {
		return `matrix3d(${toMatrix(transform.coeffs).join(",")})`;
	}

	function toMatrix(t) {
	// prettier-ignore
	return [
		t[0], t[3], 0, t[6],
		t[1], t[4], 0, t[7],
		0,    0,    1,    0,
		t[2], t[5], 0, t[8]
	];
	}

	/**
	 * Event handlers
	 */

	document.addEventListener("myPointsChanged", (event) => {
	const points = event.detail.reduce(
		(result, { x, y }) => [...result, x, y],
		[]
	);

	const transform = new PerspT([300, 0, 0, 0, 0, 300, 300, 300], points);
	image.style.transform = toCssMatrix(transform);
	});
})();