const INPUT = document.querySelector("#input");
const SUBMIT = document.querySelector("#submit");
const CLEAR = document.querySelector("#clear");

const output = document.querySelector(".output--container");
const qty = document.querySelector("#permute");

INPUT.addEventListener("keyup", (e) => {});

SUBMIT.addEventListener("click", (e) => {
	e.preventDefault();

	renderResults(INPUT.value, parseInt(qty.value));
	INPUT.value = "";
});

CLEAR.addEventListener("click", (e) => {
	e.preventDefault();
	output.innerHTML = "";
});

function renderResults(str, qty) {
	if (str.length > 0) {
		let resultsArr = new Set();
		while (qty != Array.from(resultsArr).length) {
			let newStr = randomStrings(str);

			resultsArr.add(newStr.join(""));
		}
		addPremuteToDom(resultsArr);
	}
}

function randomStrings(str) {
	let results = [];
	let strArr = str.split("");

	while (strArr.length > 0) {
		let length = strArr.length - 1;

		// get random number within length
		let random = Math.floor(Math.random() * length);

		// get value at random index
		let el = strArr[random];

		// remove value from  original arr
		strArr.splice(random, 1);

		// add to new arr
		results.push(el);
	}
	return results;
}

function addPremuteToDom(arr) {
	if (output.ChildNode != null) {
		output.firstElementChild.remove();
		renderChildren(arr);
	} else {
		renderChildren(arr);
	}
}

function renderChildren(arr) {
	let out = document.createElement("div");
	arr.forEach((el) => {
		let copyIcon = document.createElement("div");
		copyIcon.setAttribute("class", "icon icon--copy");
		let newPermute = document.createElement("div");
		let perCon = document.createElement("p");
		newPermute.addEventListener("click", (e) => {
			let range = document.createRange();
			range.selectNode(e.target);
			window.getSelection().removeAllRanges();
			window.getSelection().addRange(range);
			// newPermute.setSelectionRange(0, 100);
			document.execCommand("copy");
			console.log("target", e.target);
			window.getSelection().removeAllRanges();
		});
		copyIcon.innerHTML = `<i class="fas fa-copy"></i>`;

		perCon.innerHTML = el;
		newPermute.appendChild(copyIcon);
		newPermute.appendChild(perCon);
		newPermute.setAttribute("class", "item");
		out.appendChild(newPermute);
	});
	output.appendChild(out);
}

function clear() {}