var filterState = {};

function filterComments(){
  var data = getData();
  var filtrate = data;
  if(!_.isEmpty(filterState)){     
     //will do filtering here
  }  
  
  return data;
} 


var comments = document.getElementById('mycomments');
var tpl = document.getElementById('comment');
var filters = document.getElementById('filters');
var textField = filters.children[0];
var flt = document.getElementById('filter');

renderComments(filterComments(),comments);
addFilter('verified','Verified','Show verified users only');
addFilter('s1','','Exclude comments with rating 1','star');
addFilter('s2','','Exclude comments with rating 2','star');
addFilter('s3','','Exclude comments with rating 3','star');
addFilter('s4','','Exclude comments with rating 4','star');
addFilter('s5','','Exclude comments with rating 5','star');

function renderComments(data,p){
  p.innerHTML = "";
  data.forEach(function(d){
    var comment = tpl.cloneNode(true);
    comment.id="";
    var author = comment.getElementsByClassName("author")[0];
    author.innerHTML = d.name;
    if(d.verified)
      author.className += " verified";
    if(d.rating)
      comment.getElementsByClassName("rating")[0].className += " stars-"+d.rating;
    var html = d.text;
    if(filterState.text){      
      html = _.replace(html,new RegExp(_.escapeRegExp(filterState.text), 'gi'),'<b>$&</b>');
    }
    comment.getElementsByClassName("text")[0].innerHTML = html;
    if(d.replies&&d.replies.length)
      renderComments(d.replies,comment.getElementsByClassName("replies")[0]);
    p.appendChild(comment);
  });
}
 
function addFilter(id,label,title,cls){
  var filter = flt.cloneNode(true);
  filter.id="";
  if(cls)
    filter.className += ' '+cls;
  filter.getElementsByClassName("title")[0].innerHTML = label;
  filter.setAttribute('title',title);
  filter.addEventListener('change', function(event) {
    if(event.target.checked)
      filterState[id] = true;
    else
      delete filterState[id];
    renderComments(filterComments(),comments);
  });
  filters.appendChild(filter);
}

textField.addEventListener('keyup', function(event) {
  if(this.value!=''){
    filterState.text = this.value.toLowerCase();
  }else{
    delete filterState.text;
  }
  renderComments(filterComments(),comments);
});



// --------- Data
function getData(){
  return [
  {
    name:'Bob',
    text:'Perfect!',
    rating:5,
    verified:true,
    replies:[
      {
        name:'Alice',
        text:'Agree',
        verified:false
      },
      {
        name:'admin',
        text:'Thank you!',
        verified:true,
        replies:[
          {
            name:'Bob',
            text:'Write more!',
            verified:true,
            replies:[
              {
                name:'admin',
                text:'Ok :)',
                verified:true,
              }
            ]
          }
        ]
      },
      {
        name:"Augusta",
        text:"like a brillaint!11",
        verified:true
      }
    ]
  },
  {
    name:'mr.John',
    text:'Well done..',
    rating:4,
    verified:false,
    replies:[
      {
        name:'admin',
        text:'Can it be better?',
        verified:true,
        replies:[{
          name:'mr.John',
          text:'May be last three lines can be shorter..',
          verified:false,
          replies:[,
                {
                  name:'Bob',
                  verified:true,
                  text:"Don't listen to him, it will be unreadable!"
                }]
      }]
      }
    ]
  },
    {
      name:'Mark',
      rating:5,
      text:'Any way to donate?',
      verified:false,
      replies:[
        {
          name:'Bill',
          text:'+1',
          verified:false,
        },
        {
          name:'Larry',
          text:'+1',
          verified:true
        },
      ] 
    },
    {
      name:'Regina',
      rating:2,
      text:'Not really like it',
      verified:true,
      replies:[
        {
          name:'admin',
          text:':(',
          verified:true,
        }
      ]
    }
];
};