const API_DELAY = 500;

const resetButton = document.querySelector(".reset");

const fetchButton = document.querySelector(".fetch-button");

const count = document.querySelector("button>span:last-child");
const dataPreview = document.querySelector(".data-preview");
const previewUpdateCount = document.querySelector("#preview-update-count");

fetchButton.addEventListener("click", async () => {
	incrementButtonClickCount();
	throttleUpdatePreview();
});

function incrementButtonClickCount() {
	count.innerText = +count.innerText + 1;
}

function fetchData() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve(`Random rumber fetched from api ${Math.round(Math.random() * 100)}`);
		}, API_DELAY);
	});
}

function throttle(fn, delay) {
	let wait = false;
	return () => {
		if (!wait) {
			wait = true;
			setTimeout(() => {
				fn();
				wait = false;
			}, delay);
		}
		// if (timer) clearTimeout(timer);
		// timer = setTimeout(() => {
		// 	fn();
		// }, delay);
	};
}

async function updatePreview() {
	const data = await fetchData();
	dataPreview.innerText = data;
	previewUpdateCount.innerText = +previewUpdateCount.innerText + 1;
}

const throttleUpdatePreview = throttle(updatePreview, 550);

resetButton.addEventListener("click", () => {
	count.innerText = 0;
	dataPreview.innerText = "";
	previewUpdateCount.innerText = 0;
});