{% extends 'page.html.twig' %}

{% block title %}
    Composants
{% endblock %}

{% block style %}
    <link rel="stylesheet" type="text/css" is="custom-style"
          href="{{ app.request.getBaseURL() }}/assets/css/composants/index.css">
{% endblock %}

{% block page %}
    {% set liens = {'Accueil': path('home_index'), 'Composants': '#'} %}
    {% include 'breadcrumb.twig' with {'liens': liens} %}

    <div class="row flex">
        <paper-card id="hierarchie" class="flex-5 flex-xl-4">
            <div class="composants-container">
                <div class="row flex filtresText">
                    <div class="flex-12">
                        <paper-input type="text" id="search" oninput="find(this)" label="Recherche" no-label-float></paper-input>
                    </div>
                </div>
                {% include 'composants/_hierarchie.html.twig' with {'hierarchie': hierarchieComposants, 'rang': 0} %}
            </div>
            <div class="filtres" style="background-color: white;">
                <label for="toggleOld" onclick="window.toggleOld.click()">Afficher les éléments passés</label>
                <paper-checkbox id="toggleOld" onchange="window.hierarchie.toggleClass('show-old')"></paper-checkbox>
            </div>
        </paper-card>

        <paper-card id="detail" class="flex-7 flex-xl-8">
            <mgc-xhr-component id="xhrComponent"></mgc-xhr-component>
        </paper-card>
    </div>

    <mgc-fab
            icon="icons:add"
            onclick="xhrComponent.open('{{ path('composants_new') }}' + (hierarchie.selected ? '?idParent=' + hierarchie.selected : ''), 'new-composant')">
    </mgc-fab>

    {% if idComposant is defined and idComposant is not null %}
        <script>
            window.onload = () => {
                xhrComponent.open('{{ path('composants_show', {'id': idComposant}) }}', 'show-composant');
                hierarchie.selected = {{ idComposant }};
            };
        </script>
    {% endif %}

    {% if idFormulaire is defined and idFormulaire is not null %}
        <script>
            window.onload = () => {
                xhrComponent.open('{{ path('composants_new', {'id': idFormulaire}) }}', 'new-composant');
            };
        </script>
    {% endif %}

    <style>
        .composant-item paper-item-body{
            margin: auto!important;
        }
    </style>

    <script>
        var clean = function(el){
            var aClean = false;

            var composants = el.parentElement.parentElement.parentElement.querySelector('paper-listbox').getElementsByClassName('composant-item');
            Array.prototype.forEach.call(composants, function (composant) {
                if(composant.parentElement.querySelector('.iron-collapse-closed')) {
                    composant.querySelector('paper-icon-button').click();
                    aClean = true;
                }
            });

            if(aClean){
                el.focus();
            }
        };

        var find = function(el){
            clean(el);
            var value = el.value;

            // On reset les listes et les composants pour afficher toute la liste
            var composants = el.parentElement.parentElement.parentElement.querySelector('paper-listbox').getElementsByClassName('composant-item');
            var listes = el.parentElement.parentElement.parentElement.getElementsByTagName('paper-listbox');

            Array.prototype.forEach.call(composants, function (composant) {
                composant.style.display = 'inherit';
            });

            Array.prototype.forEach.call(listes, function (liste) {
                liste.style.display = 'inherit';
            });

            if(value !== '') {
                // Si une valeur est entrée alors on va checker les liste de composants pour savoir si on doit les afficher
                // On les affiche si au moins un composant match la regexp
                var regex2 = new RegExp('.*' + value + '.*', 'gmi')

                // Cette fonction est appelée sur une liste pour déterminer si on doit l'afficher ou non
                var callOnList = function(liste) {
                    let display = false;

                    // Pour chaque enfant de la liste on appelle une autre fonction qui détermine si l'enfant de la liste est affiché
                    if(liste.children.length > 0) {
                        for(var i=0;i<liste.children.length;i++) {
                            display |= callOnListChild(liste.children[i])
                        }
                    }

                    // Si tous les enfants de la liste sont cachés, on cache la liste et on renvoie le booleen qui détermine si la liste est caché ou non
                    if(!display) {
                        liste.style.display = 'none';
                    }

                    return display;
                }

                // Cette fonction est appelé sur l'enfant d'une liste
                var callOnListChild = function(listeChild) {
                    // un enfant est composé d'un composant et quelques fois d'une autre liste de composants
                    const composant = listeChild.children[0];
                    const composantName = composant.attributes['composant-name'].value;
                    const composantRef = composant.attributes['composant-ref'].value;
                    let display = !(composantName.match(regex2) === null && composantRef.match(regex2) === null);

                    // On détermine dans un premier temps si le composant match la regex et doit être affiché
                    if(!display) {
                        composant.style.display = 'none';
                    }

                    // S'il existe une sous liste de composant, on appelle la première fonction sur cette liste
                    if(listeChild.children.length > 1) {
                        display |= callOnList(listeChild.children[1].children[0].children[0]);
                    }

                    // Si la liste OU le composant est affiché alors l'enfant donné en entrée est affiché et donc la liste parente également
                    return display
                }

                callOnList(listes[0]);
            }
            else{
                clean(el);
            }
        }
    </script>
{% endblock %}