import { NEWS } from "./news";
import { cardHtml } from "./cardHtml";

export const renderCard = () => {
  const allNews = NEWS.items;
  let filter = '';
  const container = document.querySelector('.block-news__items');
  const loadEl = document.querySelector('.block-news__button');
  const filterEls = document.querySelectorAll('.block-filter__item');
  const path = window.location.pathname.split('/');


  if (!container || !loadEl || !filterEls) return false;

  let preloadCount = 6;

  if (path.length > 2 && path.slice(-1)[0]) {
    const news = allNews.filter(item => item.tagsFilter.includes(path.slice(-1)[0]))
    firstRender(news, container, preloadCount);
    activeFilter(filterEls, path.slice(-1)[0]);
    removeUrlParameters('filter');
  } else {
    firstRender(allNews, container, preloadCount);
  }

  loadHide(allNews.length, preloadCount, loadEl);

  // if (filterEls.length) {
  //   filterEls.forEach(item => {
  //     item.addEventListener('click', () => {
  //       container.innerHTML = '';
  //       activeRemoveAllFilter(filterEls);
  //       item.classList.add('active');
  //       filter = item.dataset.filter;
  //       if (filter && filter === 'All posts') {
  //         firstRender(allNews, container, preloadCount);
  //         loadHide(allNews.length, preloadCount, loadEl);
  //       } else {
  //         if (allNews.length) {
  //           const news = allNews.filter(item => item.tags.includes(filter))
  //           firstRender(news, container, preloadCount);
  //           loadHide(news.length, preloadCount, loadEl);
  //         }
  //       }
  //     }, false);
  //   });
  // }

  loadEl.addEventListener('click', () => {
    let prevMax = preloadCount;
    preloadCount = preloadCount + preloadCount;
    loadEl.classList.add('button--loading');
    if (filter) {
      const news = allNews.filter(item => item.tags.includes(filter));
      news.forEach((item, key) => {
        if (prevMax <= preloadCount && key + 1 > prevMax && key + 1 <= preloadCount) {
          render(container, item);
        }
        loadEl.classList.remove('button--loading');
      });
      loadHide(news.length, preloadCount, loadEl);
    } else {
      allNews.forEach((item, key) => {
        if (prevMax <= preloadCount && key + 1 > prevMax && key + 1 <= preloadCount) {
          render(container, item);
        }
        loadEl.classList.remove('button--loading');
      });
      loadHide(allNews.length, preloadCount, loadEl);
    }
  });
}

const loadHide = (count, preloadCount, el) => {
  if (count <= preloadCount) {
    el.classList.add('hide');
  }
}

const firstRender = (news, container, preloadCount) => {
  news.forEach((item, key) => {
    if (key + 1 <= preloadCount) {
      render(container, item);
    }
  });
}

const render = (container, item) => {
  return container.innerHTML += `<div class="block-news__item">${cardHtml(item)}</div>`;
}

const activeRemoveAllFilter = (filterEls) => {
  filterEls.forEach(all => all.classList.remove('active'));
}

const activeFilter = (filterEls, paramsFilter) => {
  activeRemoveAllFilter(filterEls);
  filterEls.forEach(item => {
    if (item && item.dataset.filter === paramsFilter) {
      item.classList.add('active');
    }
  });
}

const removeUrlParameters = (parameter) => {
  const url = new URL(document.location);
  const searchParams = url.searchParams;
  searchParams.delete(parameter);
  window.history.pushState({}, '', url.toString());
}