/* jshint esversion: 6 */

function htmlEscape(text) {
	const p = document.createElement('p');
	p.innerText = text;
	return p.innerHTML;
}

let $select = $(".multi-select");

let setSelected = (files) => {
	$(".multi-files-value").val(JSON.stringify(files.map(f => f.name)));
	if (files.length == 0) {
		$(".multi-files").html(`<li class="list-group-item text-muted">No files selected</li>`);
		return
	}
	$(".multi-files").html(
		files.map(f => {
			return `
				<li class="list-group-item d-flex align-items-start justify-content-between">
					<span class="name">${htmlEscape(f.name)}</span>
					${f.type == "directory" ? `` : `<span class="badge rounded-pill bg-secondary badge-alignment">${filesize(f.size)}</span>`}
				</li>
			`;
		}).join("")
	);
	const hasDirectory = files.reduce((a, f) => a || f.type == "directory", false);
	const totalSize = files.map(f => f.size).reduce((a, b) => a + b);
	if (hasDirectory) {
		$(".multi-files-total").val("");
	} else {
		$(".multi-files-total").val(filesize(totalSize));
	}
};

const updateSelected = () => {
	let $selected = $(".multi-select:checked");
	let files = [];
	$selected.each((i, ele) => {
		files.push({
			name: $(ele).data("select"),
			type: $(ele).data("select-type"),
			size: $(ele).data("select-size")
		});
	});

	setSelected(files);
}

$select.on("change", updateSelected);
updateSelected();