const searchIcon = "<i class=\"fa fa-search\">"
const loadingIcon = "<i class=\"fa fa-circle-o-notch fa-spin\"></i>"


//Initiate button listener
window.addEventListener("DOMContentLoaded", async (event) => {
    let button = document.getElementById("search-button")
    if (button) {
        button.addEventListener("click", fetchData);
    }

    let debugWindow = document.getElementById("debug-window")
    if (debugWindow) {
        let currentTab = await getCurrentTab()
        debugWindow.innerHTML = currentTab.url;
    }
});

async function fetchData() {
    let button = document.getElementById("search-button");
    button.disabled = true
    button.innerHTML = loadingIcon
    console.log("button click - disabled")

    let url = await getCurrentTab();
    if (url.url === null) {
        document.getElementById('result-list').innerHTML = 'Coś poszło nie tak :c'
        button.disabled = false
        button.innerHTML = searchIcon
        return
    }

    let res = await fetch('http://192.168.1.83:8080/scrap?url=' + url.url)
    res.json()
        .then(it => {
            console.log(it);
            let container = document.getElementById('result-list')
            container.innerHTML = null
            // create paragraph for each element found
            it.forEach(function (element) {
                let elementForComment = document.createElement('p');
                elementForComment.innerText = element;
                container.appendChild(elementForComment);
            });
            button.disabled = false
            button.innerHTML = searchIcon
        })
        .catch(e => {
            console.log(e)
            document.getElementById('result-list').innerHTML = 'Coś poszło nie tak :c'
            button.disabled = false
            button.innerHTML = searchIcon
        })
}

async function getCurrentTab() {
    let queryOptions = { active: true, currentWindow: true };
    let [tab] = await chrome.tabs.query(queryOptions);
    return tab;
}