window.addEventListener('load', function() {
  blogCollapsHandler();
  useRandomInt();
  getBlogTags();
  getTaggedBlocks();
  handleTagClick();
});

function blogCollapsHandler() {
  const arrows = [...document.querySelectorAll(".angle")];
  const collapsedBlocks = [...document.querySelectorAll(".blog-collapsible-item")];
  const blogTips = [...document.querySelectorAll(".blog-collapsible-tips")];

  if (arrows && collapsedBlocks) {
    collapsedBlocks.forEach((block, i) => {
      block.addEventListener("click", (e) => {
        arrows[i].classList.toggle("up");
        block.classList.toggle("opened");
        blogTips[i].classList.toggle("show");
      });
    });
  }
};

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

function useRandomInt() {
  const ints = [...document.querySelectorAll('.randomInt')];
  if (ints) {
    const randomInt = getRandomInt(2, 5);
    ints.forEach(int => int.innerText = `${randomInt} min`)
  }
}

function getBlogTags() {
  const tags = [...document.querySelectorAll('.tct-blog-tag')];
  tags[0].classList.add('active-tag');
}

function getTaggedBlocks() {
  const activeTag = document.querySelector('.active-tag');
  const taggedBlocks = [...document.querySelectorAll('.tct-blog-tagged-block')];
  taggedBlocks.map(block => {
    if (block.id.includes('-single')) {
      block.style.display = 'flex';
    } else if (block.id !== `${activeTag.innerText.toLowerCase()}-list`) {
      block.style.display = 'none';
    } else {
      block.style.display = 'flex';
    }
  });
}

function handleTagClick() {
  const tagsBlock = document.querySelector('.tct-blog-tags');
  tagsBlock.addEventListener('click', (event) => {
    const activeTag = document.querySelector('.active-tag');
    if (event.target.classList.contains('active-tag')) return;
    activeTag.classList.remove('active-tag');
    event.target.classList.add('active-tag');
    getTaggedBlocks();
  });
}