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

    let searchInput = "";
    let tagsId = [];
    let ingredientsId = [];

    function buildCards( data ){

            if( Array.isArray( data ) ){
                data = Object.assign({},  data );
            }

            document.getElementById( "recetteList" ).innerHTML = '';
            for( const [key, recette] of Object.entries( data ) ) {
                let HTML_CONTENT = `<a class="recette-icone" href="${recette.url}">
                <img class="recette-preview-image" src="${recette.photo}">
                <div class="recette-icone-content">
                    <h3>${recette.titre_recette}</h3>
                    <ul>
                        <li>Temps de préparation : ${recette.temps_de_preparation}</li>
                        <li>Nombre d'ingrédients : ${recette.nb_ingredients}</li>
                    </ul>
                </div>
            </a>`
                document.getElementById("recetteList").innerHTML += HTML_CONTENT;
            }
    }

    function advancedSearch(){

        let form = new FormData();
        form.append( "title", searchInput );
        form.append( "tagsId", tagsId );
        form.append( "ingredientsId", ingredientsId );

        const XML = new XMLHttpRequest();
        XML.open( "POST", '/api/recettes/list' );
        XML.onreadystatechange = function ( e ) {
            if( XML.status === 200 && XML.readyState === XMLHttpRequest.DONE ) {
                try {
                    console.log( XML.response );
                    let response = JSON.parse(XML.response);
                    console.log( "Reponse parsé" );
                    buildCards( response.data );
                } catch( e ) {
                    console.log( "Ce n'est pas un fichier JSON" );
                }
            }
        }
        XML.send( form );
    }

    const INGREDIENTSLIST = document.getElementById( 'ingredientsList' );
    for( let item of INGREDIENTSLIST.getElementsByTagName( 'li' ) ){
        item.addEventListener( 'click', function(){

            let ingredientId = Number( item.getAttribute( 'data-ingredient-id' ) );
            let index = ingredientsId.indexOf( ingredientId );

            if( index > -1 ) {
                ingredientsId.splice( index, 1 );
                item.classList.add( 'tag-unselected' );
                item.classList.remove( 'tag-selected' );
            } else {
                ingredientsId.push( ingredientId );
                item.classList.add( 'tag-selected' );
                item.classList.remove( 'tag-unselected' );
            }

            advancedSearch();

        });
    }

    const TAGSLIST = document.getElementById( 'tagsList' );
    for( let item of TAGSLIST.getElementsByTagName( 'li' ) ){
        item.addEventListener( 'click', function(){

            let tagId = Number( item.getAttribute( 'data-tag-id' ) );
            let index = tagsId.indexOf( tagId );

            if( index > -1 ) {
                tagsId.splice( index, 1 );
                item.classList.add( 'tag-unselected' );
                item.classList.remove( 'tag-selected' );
            } else {
                tagsId.push( tagId );
                item.classList.add( 'tag-selected' );
                item.classList.remove( 'tag-unselected' );
            }

            advancedSearch();

        });
    }

    const SEARCHBAR = document.getElementById( 'searchForm' );
    searchInput = new URLSearchParams(document.location.search).get("s") || searchInput;

    if( searchInput !== undefined && searchInput != "" ) {
        advancedSearch();
    }

    SEARCHBAR.onsubmit = function( e ){
        e.preventDefault();
        searchInput = document.getElementById( 'searchFormField' ).value;
        advancedSearch();
    }

});