(() => {
	const timeIncrements = Number.parseFloat(window.prompt("Time increments", 0.01));
	const frameCount = Number.parseInt(window.prompt("Frame count", 60 * 10));

	const buttonDownload = document.querySelector('[data-ref="button-download"]');
	const inputSeed = document.getElementById('input-seed');
	const inputSharpness = document.getElementById('input-sharpness');
	const inputTime = document.getElementById('input-time');

	let frames = 0;

	const download = (filename) => {
		const canvas = document.querySelector('[data-component="image-renderer"]');

		const anchor = document.createElement('a');
		anchor.style.display = 'none';
		anchor.download = filename;
		anchor.href = canvas.toDataURL('image/png');;

		// Link has to be attached to DOM to work in Firefox
		document.body.appendChild(anchor);

		// fire click
		anchor.click();

		// Link has to be attached to DOM to work in Firefox
		requestAnimationFrame(() => document.body.removeChild(anchor));
	};

	const observer = new MutationObserver((mutationsList) => mutationsList.forEach((mutation) => {
		if (buttonDownload.disabled) return;

		const id = frames.toString().padStart(8, '0');

		download(`${id}-${inputSeed.value}-${inputSharpness.value}.png`);

		inputTime.value = (Number.parseFloat(inputTime.value) + timeIncrements).toFixed(4);
		inputTime.dispatchEvent(new Event('input', { bubbles: true }));

		if (++frames === frameCount) {
			observer.disconnect();
		}
	}));

	observer.observe(buttonDownload, {
		attributes: true,
		attributeFilter: ['disabled'],
	});

	inputTime.dispatchEvent(new Event('input', { bubbles: true }));
})();