const makeArtistImg = function(artistImg) {
	let imgDiv = document.createElement("div");
	imgDiv.classList.add("fit-contain");

	let img = document.createElement("img");
	img.src = artistImg.src;

	/* handle single-line or multi-line alts */
	if (typeof artistImg.alt === "string") img.alt = artistImg.alt;
	else {
		let fullAlt = `a ${artistImg.alt.length} image collage.`
		for (let i = 0; i < artistImg.alt.length; i++)
			fullAlt += ` ${i + 1}: ${artistImg.alt[i]}`
		img.alt = fullAlt;
	}

	imgDiv.append(img);
	return imgDiv;
}

const makeArtistDesc = function(bio, contact) {
	let descDiv = document.createElement("div");
	descDiv.classList.add("description");

	/* multi-line bio array */
	for (const bioLine of bio) {
		let p = document.createElement("p");
		p.innerHTML = bioLine;
		descDiv.append(p);
	}

	/* artist contact info */
	let contacts = document.createElement("p");
	for (let i = 0; i < contact.length; i++) {
		let a = document.createElement("a");
		a.href = contact[i].href;
		a.innerHTML = contact[i].title;
		a.target = "_blank";
		contacts.append(a);

		if (i !== contact.length - 1) contacts.append(" ● ");
	}
	descDiv.append(contacts);

	return descDiv;
}

const makeArtist = function(artist) {
	let container = document.createElement("div");
	container.classList.add("artist");
	container.id = artist.id;

	/* artist img */
	container.append(makeArtistImg(artist.img));

	/* artist name */
	let h3 = document.createElement("h3");
	h3.innerHTML = artist.name;
	container.append(h3);

	/* artist description */
	container.append(makeArtistDesc(artist.bio, artist.contact));
	return container;
}

let artistContainer = document.getElementById("artists");

const makeArtistPage = function(artists) {
	for (const artist of artists)
		artistContainer.append(makeArtist(artist));
}

let script = document.currentScript;
let artistsfile = script.dataset.artists;

fetch(artistsfile)
	.then((response) => {
		if (!response.ok) {
			throw new Error(`HTTP error, status = ${response.status}`);
		}
		return response.json();
	})
	.then((artists) => makeArtistPage(artists))
	.catch((error) => {
		console.log(`Error: ${error.message}`);
	});
