import "./style.css";

const apiKey = 'f6b42179fdf54aba9e1ce12c168bcd3f';

const defaultSource = '';
const defaultQuery = '';
const defaultCountry = 'us';

let currentSource = defaultSource;
let currentQuery = defaultQuery;
let currentCountry = defaultCountry;
let currentPage = 0;
let currentUrl = 'https://newsapi.org/v2/top-headlines?' +
    currentSource + currentQuery + currentCountry +
    'pageSize=5&page=' + currentPage + '&apiKey=' + apiKey;

loadMore();

function show(node) {
    document.querySelector(node).style.display = 'unset';
}

function hide(node) {
    document.querySelector(node).style.display = 'none';
}

document.querySelector('#btn-load-more').addEventListener('click', () => {
    loadMore();
});

document.querySelector('#filter-button').addEventListener('click', () => {
    const filterInput = document.querySelector('#filter-input');
    findNewsByQuery(filterInput.value);
});

function findNewsBySource(source) {
    currentPage = 0;
    currentQuery = defaultQuery;
    currentCountry = defaultCountry;
    currentSource = source;
    const nowFoundBlock = document.querySelector('#not-found-block');
    if (loadMore())
        hide(nowFoundBlock);
    else
        show(nowFoundBlock);
}

function findNewsByQuery(query) {
    currentPage = 0;
    currentQuery = query;
    const nowFoundBlock = document.querySelector('#not-found-block');
    const newsBlock = document.querySelector('#app-news-list');
    newsBlock.innerHTML = '';
    if (loadMore()) {
        hide(nowFoundBlock);
    } else
        show(nowFoundBlock);
}


function loadMore() {
    currentUrl = 'https://newsapi.org/v2/top-headlines?' +
    `country=${currentCountry}&` + `source=${currentSource}&` + `q=${currentQuery}&` +
    `pageSize=5&page=${++currentPage}&` + 'apiKey=' + apiKey;
    alert(currentUrl);
    const request = new Request(currentUrl);
    let newsCount = 0;
    fetch(request)
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            newsCount = data.articles.length;
            if (newsCount < 5) {
                hide('#btn-load-more');
                if (newsCount === 0)
                    return;
            } else
                show('#btn-load-more');
            const block = createNewsBlock(newsCount, data.articles);
            const newsBlock = document.querySelector('#app-news-list');
            newsBlock.appendChild(block);
        });
    return newsCount;
}

function createNewsBlock(newsCount, jsonDataArticles) {
    const newsBlock = document.createDocumentFragment();
    const news_item = document.querySelector('#news-item-template');
    for (let i = 0; i < newsCount; i++) {
        const item = news_item.content.cloneNode(true).querySelector('.news-item');
        const child = fillTemplate(item, jsonDataArticles[i]);
        newsBlock.appendChild(child);
    }
    return newsBlock;
}

function fillTemplate(item, jsonData) {
    item.querySelector('.image').setAttribute('src', jsonData.urlToImage);
    item.querySelector('.item-title').textContent = jsonData.title;
    item.querySelector('.item-source').textContent = jsonData.source.name;
    item.querySelector('.item-text').textContent = jsonData.description;
    item.querySelector('.item-link').setAttribute('href', jsonData.url);
    return item;
}