import apiConnector from "./connector.js"

export default async function initAlbums(albumsPageContainer) {
	// TODO empty cells animation

	const albumsContainer = albumsPageContainer.querySelector("#albums-container")
	const albumTemplate = albumsPageContainer.querySelector("#album-template")
	async function createAlbum(res) {
		console.log(res.albumName, res.id, res.startDate, res.endDate, res.assetCount, res.shared)
		const albumClone = albumTemplate.content.cloneNode(true)
		albumClone.firstElementChild.dataset.key = res.id
		albumClone.querySelector("img").src = apiConnector.assetThumbnailSrc(res.albumThumbnailAssetId)
		albumClone.querySelector(".album-name").textContent = res.albumName
		albumClone.querySelector(".album-assets-count").textContent = res.assetCount.toLocaleString()
		if (!res.shared)
			albumClone.querySelector(".album-shared").remove()

		albumsContainer.appendChild(albumClone)
	}

	const albumsResponse = await apiConnector.fetchAlbums()

	for (const res of albumsResponse)
		createAlbum(res)

	albumsContainer.addEventListener("click", e => {
		// find album element
		let album = e.target
		while (album && !album.classList.contains("album"))
			album = album.parentElement

		if (album === null)
			return

		console.log(album)
		if (album.dataset.selected)
			delete album.dataset.selected
		else
			album.dataset.selected = "1"
	})

	return true
}