'use strict';

window.addEventListener('DOMContentLoaded', function () {
	let $boutonsAfficher = document.querySelectorAll('[data-carte-formulaire="afficher-formulaire"]');
	let $boutonsMasquer = document.querySelectorAll('[data-carte-formulaire="masquer-formulaire"]');

	$boutonsAfficher.forEach(function (boutonAfficher) {
		boutonAfficher.addEventListener('click', afficherFormulaire);
	});

	$boutonsMasquer.forEach(function (boutonMasquer) {
		boutonMasquer.addEventListener('click', masquerFormulaire);
	});
});

function afficherFormulaire(event) {
	let $parent = event.target.closest('[data-carte-formulaire="parent"]');
	let $formulaire = $parent.querySelector('[data-carte-formulaire="modifier"]');
	let $restitution = $parent.querySelector('[data-carte-formulaire="restitution"]');

	if ($parent && $formulaire && $restitution) {
		$restitution.setAttribute("hidden", "");
		$formulaire.removeAttribute("hidden");
		$parent.focus();
	}
};

function masquerFormulaire(event) {
	let $parent = event.target.closest('[data-carte-formulaire="parent"]');
	let $formulaire = $parent.querySelector('[data-carte-formulaire="modifier"]');
	let $restitution = $parent.querySelector('[data-carte-formulaire="restitution"]');

	if ($parent && $formulaire && $restitution) {
		$formulaire.setAttribute("hidden", "");
		$restitution.removeAttribute("hidden");
		$parent.focus();
	}
}

// Script toggle-more
jQuery(function ($) {
    /** Structure attendue
     * <ul id="collapsable-item"> // L'id du bloc "controllé"
     *  <li>Item 1</li>
     *  <li>Item 2</li>
     *  <li class="fadeIn hidden">Item 1</li>
     *  <li class="fadeIn hidden">Item 2</li>
     *  <li class="fadeIn hidden">Item 3</li>
     *  <li class="fadeIn hidden">Item 4</li>
    * </ul>
    * <button
    *     type="button" class="btn-reset btn-more"
    *     data-pe-toggle="more"  // Pour des soucis retro-compatibilité, data-toggle="more" est aussi accepté
    *     data-target="#collapsable-item" // On précise l'id bu bloc à controller dans le data-target
    *     data-title-collapsed="Title quand replié"
    *     data-title-visible="Title quand déplié"
    *     aria-controls="collapsable-item" // On précise l'id bu bloc à controller dans le data-target
    * >
    *   Voir plus / Voir moins
    * </button>
    *
    * Attention : Nécessite du CSS complémentaire pour controller l'affichage du bouton Voir plus / Voir moins
    * Pour gérer l'affichage, quand la liste est dépliée le bouton a la classe "displayed", et la classe "collapsed" quand elle est repliée

    /** Gestion des collapses */
    $('[data-pe-toggle="more"], [data-toggle="more"]').on('click', function (e) {
        let $trigger = $(this);
        wasVisible = $trigger.hasClass('displayed'), // Is the button currently in display mode ?
            $itemsToToggle = $trigger.attr('dataItemsToToggle') || $($trigger.attr('data-target')).children('.fadeIn'), // We cache the jQuery items upon first use
            $firstItemToToggle = $itemsToToggle.first(),
            $firstInputFocusable = null;

        // Si l'élément séléctionné est un input, on l'utilisera
        if ($firstItemToToggle.is('input')) {
            $firstInputFocusable = $firstItemToToggle;
        }
        // Si l'élément séléctionné contient un input, on utilise le premier
        else if ($firstItemToToggle.find('input').length) {
            $firstInputFocusable = $firstItemToToggle.find('input').first()
        }

        // Si on replie la liste
        const dataExpanded = $trigger.attr('data-expanded');
        const dataCollapsed = $trigger.attr('data-collapsed');
        if (wasVisible) {
            $trigger
                .removeClass('displayed')
                .addClass('collapsed')
                .attr('title', $trigger.attr('data-title-collapsed'));

            // Si le bouton de collapse change de contenu ("afficher / masquer la suite"), il ne doit pas avoir de `aria-expanded`
            if (!dataExpanded && !dataCollapsed) {
                $trigger.attr('aria-expanded', 'false')
            }

            $itemsToToggle.addClass('hidden').prop('hidden', true); // On utilise aussi la classe .hidden au cas ou le display:none de l'attribut hidden est surchargé par une autre classe
            if ($firstInputFocusable === null) {
                $firstItemToToggle.removeAttr('tabindex');
            }
        }

        // Si on affiche la liste
        else {
            $trigger
                .addClass('displayed')
                .removeClass('collapsed')
                .attr('title', $trigger.attr('data-title-visible'));

            // Si le bouton de collapse change de contenu ("afficher / masquer la suite"), il ne doit pas avoir de `aria-expanded`
            if (!dataExpanded && !dataCollapsed) {
                $trigger.attr('aria-expanded', 'true')
            }

            $itemsToToggle.removeClass('hidden').prop('hidden', false);

            if ($firstInputFocusable === null) {
                $firstItemToToggle
                    .attr('tabindex', '-1')
                    .trigger('focus');
            }
            else {
                $firstInputFocusable.focus();
            }
        }
    });
});