export const pageBlockFilter = () => {
  const pageBlock = document.querySelector('.page-block');

  if (!pageBlock) return false;

  const filterItem = pageBlock.querySelectorAll('.page-block__filter-item');
  const videoItem = pageBlock.querySelectorAll('.page-block__video');
  const noneV = pageBlock.querySelector('.page-block__video-none');
  const activeItemFilter = [];

  [...filterItem].map((item) => {
    //const ids = [...videoItem].map((itemVideo) => itemVideo.dataset.filterVideo);
    item.addEventListener('click', () => {
      if (item.classList.contains('active')) {
        item.classList.remove('active');
        deleteNumberArray(activeItemFilter, Number(item.dataset.filterItem));
      } else {
        item.classList.add('active');
        if (!activeItemFilter.includes(item.dataset.filterItem)) {
          activeItemFilter.push(parseInt(item.dataset.filterItem));
        }
      }
      [...videoItem].map((itemVideo) => {
        itemVideo.classList.add('hide');
        if (activeItemFilter.length === 0) {
          itemVideo.classList.remove('hide');
        } else {
          activeItemFilter.map((oneActiveItemFilter) => {
            if (JSON.parse(itemVideo.dataset.filterVideo).includes(oneActiveItemFilter)) {
              itemVideo.classList.remove('hide');
            }
          });
        }
      });
      visibleBlock(item, activeItemFilter, noneV);
    });
  });
};

const visibleBlock = (item, activeItemFilter, noneV) => {
  const pageBlock = document.querySelector('.page-block');

  if (activeItemFilter.length > 0 && noneV) {
    if (pageBlock.querySelectorAll('.page-block__video:not(.hide)').length === 0) {
      noneV.classList.add('show');
    } else {
      noneV.classList.remove('show');
    }
  } else {
    noneV.classList.remove('show');
  }
};

const deleteNumberArray = (array, filterNumber) => {
  array.map((item, key) => {
    if (Number(filterNumber) === Number(item)) {
      array.splice(key, 1);
    }
  });
};