const Flickity = require("flickity")
import "flickity/dist/flickity.min.css"

const apiKey = "m5nqOoBc4uhAba21gZdCP3z8D3JT4GPxDXL2psd52EA"
console.log(apiKey)
const testDiv = document.querySelector("main div")

function showAlbums() {
	testDiv.innerHTML
}

function pathnameCallback(e) {
	console.log(e)
	//testDiv.innerHTML = ""
	//switch (window.location.pathname) {
	//	case "/":
	//		testDiv.innerHTML = "<p>Hello first page</p>"
	//	break ;;
	//	case "/albums":
	//		testDiv.innerHTML = "<p>Hello albums page</p>"
	//	break ;;
	//	case "/settings":
	//		testDiv.innerHTML = "<p>Hello settings page</p>"
	//	break ;;
	//}
}
window.addEventListener("popstate", pathnameCallback)
pathnameCallback()

/* add event listeners for anchor elements in footer */
function anchorRedirect(e) {
	e.preventDefault()
	window.history.pushState({}, "", e.target.href);
	pathnameCallback()
}

for (const a of document.querySelectorAll("footer a"))
	a.addEventListener("click", anchorRedirect)

function scroll(progress) {
	const normalizedProgress = progress / (1 / (flkty.cells.length-1))
	const liveSelectedIndex = Math.round(normalizedProgress)
	const localizedProgress = normalizedProgress - liveSelectedIndex

	const prevSelectedCell = flkty.cells.at(liveSelectedIndex-1).element
	const liveSelectedCell = flkty.cells.at(liveSelectedIndex     % flkty.cells.length).element
	const nextSelectedCell = flkty.cells.at((liveSelectedIndex+1) % flkty.cells.length).element

	const prevSelectedImage = prevSelectedCell.firstElementChild
	const liveSelectedImage = liveSelectedCell.firstElementChild
	const nextSelectedImage = nextSelectedCell.firstElementChild

	const prevMargin = prevSelectedCell.clientWidth - prevSelectedImage.clientWidth
	const liveMargin = liveSelectedCell.clientWidth - liveSelectedImage.clientWidth
	const nextMargin = nextSelectedCell.clientWidth - nextSelectedImage.clientWidth

	liveSelectedImage.style.marginLeft = liveMargin / 2 + "px"
	nextSelectedImage.style.marginLeft = Math.max(0, Math.min(nextMargin, nextMargin * (localizedProgress))) + "px"
	prevSelectedImage.style.marginLeft = prevMargin - Math.max(0, Math.min(prevMargin, prevMargin * localizedProgress * -1)) + "px" // TODO clean this
}

var flkty = new Flickity('#slideshow-carousel', {
	wrapAround: true,
	prevNextButtons: false,
	pageDots: false,
	resize: true,
})

flkty.on("scroll", scroll)


function positionImageStatic(img) {
	const i = parseInt(img.dataset.index)
	if (i == flkty.selectedIndex)
		img.style.marginLeft = (img.parentElement.clientWidth - img.clientWidth) / 2 + "px"
	else if ((i + 1) % flkty.cells.length == flkty.selectedIndex)
		img.style.marginLeft = img.parentElement.clientWidth - img.clientWidth + "px"
}

function imageLoaded(e) { positionImageStatic(e.target) }
function initImages() {
	const imgs = document.querySelectorAll("#slideshow-carousel img")
	for (let i = 0; i < imgs.length; i++) {
		const img = imgs[i]
		img.dataset.index = i
		img.addEventListener("load", imageLoaded)
		if (img.complete)
			positionImageStatic(img)
	}
}
initImages()