'use strict';
function titleClickHandler(event) {
  event.preventDefault();
  const clickedElement = this;
  console.log('Link was clicked!');
  /* [DONE] remove class 'active' from all article links  */
  const activeLinks = document.querySelectorAll('.titles a.active');
  for (let activeLink of activeLinks){
    activeLink.classList.remove('active');
  }
  /* add class 'active' to the clicked link */
  clickedElement.classList.add('active');
  console.log('clickedElement:', clickedElement);
  const activeArticles = document.querySelectorAll('.posts .post.active');
  for(let activeArticle of activeArticles){
    activeArticle.classList.remove('active');
  }
  const articleSelector = clickedElement.getAttribute('href');
  const targetArticle = document.querySelector(articleSelector);
  targetArticle.classList.add('active');
}
const links = document.querySelectorAll('.titles a');
for(let link of links) {
  link.addEventListener('click', titleClickHandler);
}
const optArticleSelector = '.post';
const optTitleSelector = '.post-title';
const optTitleListSelector = '.titles';
const optArticleTagsSelector = '.post-tags .list';
const optTagsListSelector = '.tags.list';
let allTags = {};
const optCloudClassCount = 5;
const optCloudClassPrefix = 'tag-size';

function generateTitleLinks(){
  const titleList = document.querySelector('.list.titles');
  titleList.innerHTML = '';
  const articles = document.querySelectorAll('.posts .post');
  let html = '';
  for(let article of articles){
    const articleId = article.getAttribute('id');
    const articleTitleElement = article.querySelector('.post-title');
    const articleTitle = articleTitleElement.innerHTML;
    const linkHTML = '<li><a href="#' + articleId + '"><span>' + articleTitle + '</span></a></li>';
    html = html + linkHTML;
  }
  titleList.innerHTML = html;
  const links = document.querySelectorAll('.titles a');
  for(let link of links) {
    link.addEventListener('click', titleClickHandler);
  }
}

generateTitleLinks();

function calculateTagsParams(tags) {
    const params = {
    max: 0,
    min: 999999,
  }
    return params;
}

function calculateTagClass(){
}

function calculateTagsParams(tags) {
  const params = {
    max: 0,
    min: 999999
  };
  for(let tag in tags){
    if(tags[tag] > params.max) {
      params.max = tags[tag];
    }
    if(tags[tag] < params.min) {
      params.min = tags[tag];
    }
  }
  return params;
}

function generateTags(){
  const articles = document.querySelectorAll(optArticleSelector)
  for(let article of articles) {
    const tagsWrapper = article.querySelector(optArticleTagsSelector);
    let html = '';
    const tags = article.getAttribute('data-tags');
    const tagsArray = tags.split(' ');
    for(let tag of tagsArray) {
      const linkHTML = '<a href="tag-' + tag + '">' + tag + ' ' + '</a>';
      html = html + linkHTML;
      if(!allTags.hasOwnProperty(tag)){
        allTags[tag] = 1;
      } else {
        allTags[tag]++;
      }
    }
    tagsWrapper.innerHTML = html;
  }

const tagsParams = calculateTagsParams(allTags);

  console.log(tagsParams);

  const tagList = document.querySelector('.tags');
  let allTagsHTML = '';
  for(let tag in allTags){
    const link = '<li class="' + tag +'"><a href="#">'+ tag + '</a>'+'(' + allTags[tag]  + ')'+'</li>'
    allTagsHTML = link + allTagsHTML
  }
  tagList.innerHTML = allTagsHTML;

}
generateTags();