// window.pages
// window.searchresults : [pageFilename, parent, heading])

document.addEventListener('searchTitles', (e) => { searchHeadings(e.detail.searchTerm, false);})
document.addEventListener('searchHeadingsComplete', (e) => {
    console.log(e)
    if(e.detail.exactSearch){
        displayContent();
    }else{
        displaySearchResults();
    }
})

function searchTriggered(){
    clearSearchResults();
    const searchTerm = $('#searchbar > input').first().val();
    const searchEvent = new CustomEvent('searchTitles', {
        detail: { 
         searchTerm:  searchTerm
        }
     });
     document.dispatchEvent(searchEvent);
}

async function loadSearchJson(){
    let url = './study-javascript-pages.json';

    fetch(url)
    .then(res => res.json())
    .then((data) => {
        window.pages = data;
        document.dispatchEvent(new Event("pageDataLoaded"));
    })
    .catch(err => { throw err });
}

function displayHeadings(){
    $('body').append("<ul id='headings'></ul>");
    window.pages.forEach((page) => {
        traverseHeadings(page, page.headings);
    })
}

function traverseHeadings(parent, headingsArray){
    headingsArray.forEach((heading) => {
        var parentRef = (heading.level != 1) ? parent.title + " - " : "" ;
        
        $('#headings').append("<li>" + heading.title + "</li>");
        traverseHeadings(heading, heading.subheadings);
    })
}

function searchHeadings(searchTerm, exactMatchRequired){
    console.log('findHeadingByTitle: "' + searchTerm + '"')
    window.searchresults = [];
    window.pages.forEach((page) => {
        searchSubheadings(page.filename, null , page.headings, searchTerm, exactMatchRequired);
    })
    
    document.dispatchEvent(new CustomEvent('searchHeadingsComplete', {
        detail: { 
        exactSearch:  exactMatchRequired
        }
     }));
}

function searchSubheadings(pageFilename, parent, headingsArray, searchTerm, exactMatchRequired){
    headingsArray.forEach((heading) => {

        const headingPartialMatchesSearchTerm = heading.title.toLowerCase().indexOf(searchTerm.toLowerCase())  != -1
        const headingExactMatchesSearchTerm = heading.title === searchTerm
        const matchSatisfied = exactMatchRequired ? headingExactMatchesSearchTerm : headingPartialMatchesSearchTerm; 
        if(matchSatisfied){
            window.searchresults.push([pageFilename, parent, heading])
            console.log("Search result: " + heading.title);
        }
        searchSubheadings(pageFilename, heading, heading.subheadings, searchTerm, exactMatchRequired)
    });
}

function displaySearchResults(){
    console.log("displaySearchResults")
    window.searchresults.forEach((resultArray) => {
        var pageFilename = resultArray[0] 
        var parent = resultArray[1] // this is null for h1s
        var heading = resultArray[2]

        $('div#answers > div#list > ul').append(`<li><a onclick='javascript:headingSearchResultClicked(this)' href='javascript:void(0)'>${heading.title}</a></li>`);
    }) 
}

function clearSearchResults(){
    $('#answers > ul').html("");
}

function headingSearchResultClicked(anchortag){
    const linkText = $(anchortag).html();
    searchHeadings(linkText, true);
}

function displayContent(allSubHeadings=false){
    $("div#content > div#contentbody").html("") 
    console.log("displayContent();")
    const firstSearchResult = window.searchresults[0]
    const firstSearchResultHeading = firstSearchResult[2];
    const firstSearchResultParent = firstSearchResult[1] 
    const firstSearchResultPageFilename = firstSearchResult[0] 

    const showAllSubHeadingsLink = "<a onclick='displayContent(true);' href='javascript:void(0)'>Show all</a>"

    const showParentHeadingLink = (firstSearchResultHeading.level == 1) ? "Parent": "<a onclick='displayParent();' href='javascript:void(0)'>Parent</a>" 
    const fullPageLink = firstSearchResultPageFilename; 

    $("div#content > div#titlebar").html(showAllSubHeadingsLink + " - " + fullPageLink + " - " + showParentHeadingLink)
    if(allSubHeadings){ 
        displaySubHeadings(firstSearchResultHeading);
        return;
    }else{
        console.log('Displaying: ' + firstSearchResultHeading.title);
        $("div#content > div#contentbody").html(firstSearchResultHeading.tagHtml + firstSearchResultHeading.text)
    }   

}
function displaySubHeadings(heading){
    $("div#content > div#contentbody").append(heading.tagHtml + heading.text);
    heading.subheadings.forEach((subheading) => {
        displaySubHeadings(subheading);
    });
}
function displayParent(){
    const parent = window.searchresults[0][1];
    searchHeadings(parent.title, true);
}