var searchFunction = function(event) {
    var searchQuery = $('#search-query').val();
    
    if (searchQuery.length <= 3) {
        $('#search-results').html("<p>Aucun résultat trouvé</p>");
        return;
    }
    
    var lunrResults = lunrIdx.search(searchQuery);
    if (lunrResults.length > 0) {
        populateLunrResults(searchQuery, lunrResults);
    }else{
        $('#search-results').html("<p>Aucun résultat trouvé</p>");
    }
}

var templateDefinition = `
    <div id="summary-{{ key }}">
      <h4><a href="{{ link }}index.html">{{ title }}</a> <small>{{ categories }}</small></h4>
      <p>{{ content }}</p>
    </div>
`;
var template = Handlebars.compile(templateDefinition);

var populateLunrResults = function(searchQuery, results) {
    var resultDiv = $('#search-results');
    resultDiv.html('');
    $.each(results,function(rIdx,result){
        var resultPage = jsonData.filter(function(page) {
            return page.permalink === result.ref;
        })[0];
        console.info(result);
        console.info(resultPage);
        
        var output = template({
            key: rIdx,
            title: resultPage.title,
            content: resultPage.contents,
            categories: resultPage.categories,
            link: result.ref
        });
        resultDiv.append(output);
        
        $("#summary-" + rIdx).mark(searchQuery.replace(/[+-]/g, ''));
    });
}

var lunrIdx;
var jsonData;
$('#search-query').prop('disabled', true);
$.getJSON( "../index.json", function( pages ) {
    jsonData = pages;
    
    lunrIdx = lunr(function() {
        this.field("title", { boost: 10 });
        this.field("categories", { boost: 5 });
        this.field("contents");
        this.ref("permalink");

        jsonData.forEach(function (page) {
            this.add(page)
        }, this)
    });
    
    $('#search-query').prop('disabled', false);
    searchFunction();
});

var formField = $('#search-query');
formField.change(searchFunction);
formField.keyup(searchFunction);