document.addEventListener('DOMContentLoaded', function () {

	const showTypesButton = document.getElementById('showTypes');
	const listTypes = document.getElementById('list_types');
	const iconTypes = document.getElementById('iconTypes');

	const showLanguesButton = document.getElementById('showLangues');
	const listLangues = document.getElementById('list_langues');
	const iconLangues = document.getElementById('iconLangues');

	const showGenresButton = document.getElementById('showGenres');
	const listGenres = document.getElementById('list_genres');
	const iconGenres = document.getElementById('iconGenres');

	// Fonction pour gérer l'ouverture et la fermeture d'une liste avec le bouton
	function toggleList(button, list, icon) {
		button.addEventListener('click', function (event) {
			event.preventDefault();
			list.classList.toggle('open');
			icon.classList.toggle('open');
		});
	}

	// Vérifiez si une checkbox est cochée et ouvrez la liste si c'est le cas
	function checkIfListShouldBeOpen(list) {
		const checkboxes = list.querySelectorAll('.filter-checkbox');
		for (let i = 0; i < checkboxes.length; i++) {
			if (checkboxes[i].checked) {
				list.classList.add('open');
				return true;
			}
		}
		return false;
	}

	// Attache les événements aux boutons
	toggleList(showTypesButton, listTypes, iconTypes);
	toggleList(showLanguesButton, listLangues, iconLangues);
	toggleList(showGenresButton, listGenres, iconGenres);

	// Vérifiez les listes au chargement de la page
	checkIfListShouldBeOpen(listTypes) && iconTypes.classList.add('open');
	checkIfListShouldBeOpen(listLangues) && iconLangues.classList.add('open');
	checkIfListShouldBeOpen(listGenres) && iconGenres.classList.add('open');

	// Faire défiler jusqu'au début de la div spécifiée seulement si l'utilisateur a effectué une action
	const targetDiv = document.getElementById('searchbar_catalog');
	if (window.location.search !== "") {
		targetDiv.scrollIntoView();
	}

});