const Flickity = require("flickity")
import "flickity/dist/flickity.min.css"
import apiConnector from "./connector.js"

export default function initSlides(slidesContainer) {
	/* Flickity function for scrolling to ensure next and prev pics are always
	 * visible and to transition between states */
	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
	}

	/* jump to clicked on slide */
	function staticClick(e, pointer, cellElement, cellIndex) {
		flkty.select(cellIndex)
	}

	/* make sure images have correct margin when loaded since scroll function
	 * depends on them being loaded */
	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 = slidesContainer.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)
		}
	}

	/* initialize slides */
	const flkty = new Flickity('#slideshow-carousel', {
		wrapAround: true,
		prevNextButtons: false,
		pageDots: false,
		resize: true,
		setGallerySize: false,
	})

	flkty.on("scroll", scroll)
	flkty.on("staticClick", staticClick)
	initImages()

	/* initialize seek buttons */
	const seekPrevButton = slidesContainer.querySelector("#prevSlide")
	const seekNextButton = slidesContainer.querySelector("#nextSlide")

	seekPrevButton.addEventListener("click", () => { apiConnector.seek(-1) })
	seekNextButton.addEventListener("click", () => { apiConnector.seek(+1) })

	/* done */
	return true
}