const form = document.querySelector('.form');
const results = document.querySelector('#results');
const search = document.querySelector('#search');
const random = document.querySelector('#random');
const query = document.querySelector('#query');

let timeOut = null; // used for #search to limit unnecessary calls to wikipedia api

function fetchWikipediaNew(queryType = 'random', searchString){
    if (!searchString && queryType !== 'random') {
        return;
    }
    let queryString = `&gsrsearch=${searchString}&gsrenablerewrites=1`;
    if (queryType !== 'search') {
        queryString ='&exlimit=10&grnnamespace=0&grnlimit=10';
    } 
    const apiURL = `https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&prop=extracts&generator=${queryType}&exsentences=1&exintro=1&explaintext=1${queryString}`;
    console.log(apiURL);
    
    // Using fetch
    fetch( apiURL, {
        method: 'GET',
        headers: new Headers( {
            'Api-User-Agent': 'Example/1.0'
        } )})
        .then(response => response.json())
        .then(data => data.query.pages)
        .then(data => jsonToHtml(data, results))
        // .catch(error => console.log('error is ', error));
        .catch(error => handleError(error, results));
    
}
function handleError(err, targetDiv) {

    targetDiv.innerHTML = '<div class="error">Nothing available on that topic</div>';
    console.log(err);
    return null;

}
function jsonToHtml( jsonData, targetDiv) {
    
    const pageurl='http://en.wikipedia.org/?curid=';
    let counter = 0;
    targetDiv.innerHTML = '';
    if (jsonData == undefined) {
        targetDiv.innerHTML = `
        <div class="error">Nothing available on that topic</div>
        `;
    }
    for (let i in jsonData){
        targetDiv.innerHTML += (`        
        <div class="results result">
        <div class="results title">
            <a target="_blank" href="'+pageurl+jsonData[i].pageid+'">${counter += 1}. ${jsonData[i].title}
                <sup>
                    <i class="icon fas fa-external-link-alt fa-xs"></i>
                </sup>
            </a>
        </div>
        <div class="results extract">${jsonData[i].extract}</div>
    </div>`
        );
    }
}

search.addEventListener('click', () => {
    fetchWikipediaNew('search', encodeURIComponent(query.value.trim()));
});
random.addEventListener('click', () => {
    fetchWikipediaNew();
});

query.addEventListener('keyup', (event) => {
    clearTimeout(timeOut);
    timeOut = setTimeout(function () {
        console.log(query.value);
        fetchWikipediaNew('search', encodeURIComponent(query.value.trim()));
    },750);
});