/* global developmentMode:false, ajx:false, getKey:false, getValue:false, changeText:false, noConnection:false, queryName:false, getScript:false, Chart:false, username:true, channelname:true, actualCount:false, isTutorialOn:true, internet:false, firstload:true, notFound:false, isChart:true, myLineChart1:false
*/
var shareswitch = 0;
var navState = [0, 0];
var views = [];
var extraswitch = 0;
var myLineChart2;
var myLineChart3;
var myLineChart4;
var vids = 5;
// just to ensure that the correct page is loaded iframe and http is checked again
if (!developmentMode) {
  // 1. Check if iframe or http
  if (window.top !== window.self || window.top.location !== window.self.location) {
    window.top.location = window.self.location;
  } else if (window.location.hostname !== 'youcount.github.io' || window.top.location.hostname !== 'youcount.github.io') {
    window.location.hostname = 'youcount.github.io';
  }
}
// MISC FUNCTIONS
// below, the ids are assigned their onclicks.
function idClickListener(ele, func) {
  document.getElementById(ele).addEventListener('click', func);
}

function queryClickListener(ele, func) {
  var elems = document.querySelectorAll(ele);
  elems.forEach(function (e) {
    e.addEventListener('click', func);
  });
}
function fx(str) {
  var ele = document.getElementById(str);
  var ini = 0;
  var op = 1;
  var parts = 1;
  fx.transition = function (value, fin, sign, func) {
    var val = value;
    for (var i = 0; i < parts; i++) {
      setTimeout(function () { // eslint-disable-line no-loop-func
        val += Number((fin - ini) / parts);
        func(val);
      }, 50 * (i + 1));
    }
  };
  fx.fadeIn = function (t = 400) {
    parts = t / 50;
    if (window.getComputedStyle(ele).getPropertyValue('display') === 'none') {
      if (ele.dataset.fxDisplay)ele.style.display = ele.dataset.fxDisplay;
      else ele.style.display = 'block';
      op = ele.dataset.fxOpacity || Number(ele.style.opacity) || 1;
      ele.style.opacity = 0;
      fx.transition(0, op, 1, function (v) {ele.style.opacity = v; }, t);
    }
  };
  fx.fadeOut = function (t = 400) {
    parts = t / 50;
    if (window.getComputedStyle(ele).getPropertyValue('display') !== 'none') {
      ele.dataset.fxDisplay = window.getComputedStyle(ele).getPropertyValue('display');
      if (ele.style.opacity)op = Number(ele.style.opacity); else op = 1;
      ele.dataset.fxOpacity = op;
      ini = op;
      fx.transition(op, 0, -1, function (v) {ele.style.opacity = v;}, t);
      setTimeout(function () {
        ele.style.display = 'none';
        ele.style.opacity = ele.dataset.fxOpacity;
      }, t);
    }
  };
  return fx;
}
// this is to hide email from spam bots
var emailParts = ['manas.khurana20', 'gmail', 'com', '&#46;', '&#64;'];
document.getElementById('email').innerHTML = emailParts[0] + emailParts[4] + emailParts[1] + emailParts[3] + emailParts[2];
document.getElementById('email').href = 'mailto:' + document.getElementById('email').innerHTML;

var clickList = [
  ['inputButton', function () {
    getValue();// called like this because addEventListener by default does not send empty parameter.
  }],
  ['fb', function () {
    window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.querySelector('#pageUrl input').getAttribute('value')), '_blank');
  }],
  ['tw', function () {
    window.open('https://twitter.com/share?text=' + document.getElementById('username').value + ' now has  ' + actualCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' subscribers!&url= ' + encodeURIComponent(document.querySelector('#pageUrl input').getAttribute('value')) + '&hashtags=YouCount', '_blank');
  }],
  ['lnkdIn', function () {
    window.open('https://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.querySelector('#pageUrl input').getAttribute('value')) + '&title=' + encodeURIComponent(channelname) + '\'s%20Live%20Subscriber%20Count&source=YouCount', '_blank');
  }],
  ['tb', function () {
    window.open('http://www.tumblr.com/share/link?url=' + encodeURIComponent(document.querySelector('#pageUrl input').getAttribute('value')), '_blank');
  }],
  ['rdit', function () {
    window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(document.querySelector('#pageUrl input').getAttribute('value')) + '&title=' + encodeURIComponent(channelname) + 's%20Live%20Subscriber%20Count', '_blank');
  }],
  ['link', linkshare],
  ['bg2', function () {
    if (isTutorialOn[0]) {
      tutorial(3);
    } else {
      fx('pageUrl').fadeOut(250);
      fx('bg2').fadeOut(500);
    }
  }]
];
clickList.forEach(function (e) {
  idClickListener(e[0], e[1]);
});
// below, the queries are assigned their onclicks(all elements except the ones with ids).
//
// only for single ids is a separate function created because getElementById is faster than
// querySelectorAll and there are a lot of single ids being assigned onclicks.
queryClickListener('.suggest', function (v) {
  if (v.target.dataset.id) {
    username = v.target.dataset.id;
    var send = 'https://www.googleapis.com/youtube/v3/channels?part=snippet&id=' + v.target.dataset.id + '&fields=items/snippet&key=';
    queryName(send);
  }
});
['showextra', 'hideextra'].forEach(function (e) {
  idClickListener(e, extrabutton);
});

function tutorial(n = 0) {
  if (navState[0])handleNavButtons(navState[0]);
  isTutorialOn[0] = 1;
  isTutorialOn[1] = n+1;
  window.scrollTo(0, 0);
  var bottom = 0;
  switch (n) {
  case 0:
    document.getElementById('username').value = '';
    document.getElementById('input').style.zIndex = '1004';
    document.getElementById('tutorial').style.display = 'block';
    bottom = (document.getElementById('username').getBoundingClientRect()).bottom;
    document.getElementById('tutorial').style.top = (bottom + 35) + 'px';
    document.getElementById('bg2').style.display = 'block';
    document.getElementById('tutStep1').style.display = 'block';
    document.getElementById('tutStep2').style.display = 'none';
    if(!isLive) document.getElementById('actualCount').innerHTML='Tutorial'
    //when clicking on 'Click Here', the username is automatically focussed.
    document.getElementById('tutorial').addEventListener('click',function(){
      if(isTutorialOn[1]===1)
        document.getElementById('username').focus();
    });

    break;
  case 1:
    document.getElementById('tutStep1').style.display = 'none';
    document.getElementById('tutStep2').style.display = 'block';
    bottom = (document.getElementById('username').getBoundingClientRect()).bottom;
    document.getElementById('tutorial').style.top = (bottom + 35) + 'px';
    break;
  case 2:
    document.getElementById('tutStep1').style.display = 'none';
    document.getElementById('tutStep2').style.display = 'block';
    document.getElementById('suggest').style.zIndex = '1004';
    bottom = (document.getElementById('suggest').getBoundingClientRect()).bottom;
    document.getElementById('tutorial').style.top = (bottom + 35) + 'px';
    document.getElementById('bg2').style.display = 'block';
    break;
  case 3:
    document.getElementById('tutorial').style.display = 'none';
    document.getElementById('bg2').style.display = 'none';
    document.getElementById('input').style.zIndex = '50';
    document.getElementById('suggest').style.zIndex = '51';
    document.getElementById('username').value = channelname;
    isTutorialOn[0] = 0;
    isTutorialOn[1] = 0;
    break;
  default:
    isTutorialOn[0] = 0;
    isTutorialOn[1] = 0;
    break;
  }
}

if (isTutorialOn[0]) tutorial();

// this function gives the share button its clicking function.
// if the button is clicked (ie shareswitch === 0),
// the sharing features are shown, meanwhile the shareswitch is set to 1.
// After transition is over, shareswitch === 2. running the func again will do the opposite
// When shareswitch === 1, it represents the transition, so the function will simply quit
// Hence neither body nor button when clicked during transition won't be able to do anything
function shareFunc(isButton) {
  var t = 200; // time in milliconds
  if (isButton !== true && shareswitch < 2) {
    return;
  }
  var shareElems = document.querySelectorAll('.share');
  switch (shareswitch) {
  case 0:
    shareswitch = 1;
    shareElems.forEach(function (e, i) {
      setTimeout(function () {
        fx(e.id).fadeIn(t);
      }, 40 * (i - 1));
    });
    setTimeout(function () {
      shareswitch = 2;
    }, t + shareElems.length * 40);
    break;
  case 1:break;
  case 2:
    shareswitch = 1;
    navState[0] = 0;
    shareElems.forEach(function (e) {
      fx(e.id).fadeOut(t);
    });
    setTimeout(function () {
      shareswitch = 0;
    }, t + shareElems.length * 40);
    break;
  default:break;
  }
}
queryClickListener('body', shareFunc);

function handleNavButtons(n) {
  if (navState[1]) return;
  if (navState[0] !== 0) {
    navState[1] = 1;
    document.getElementById('bg1').style.height = '100%';
    document.getElementById('bg1').classList.add('ball');
    document.getElementById('mainPage').style.display = 'block';
    if (navState[0] === n) {
      setTimeout(function () {
        navState = [0, 0];
      }, 500);
    } else {
      setTimeout(function () {
        navState = [0, 0];
        handleNavButtons(n);
      }, 500);
    }
    switch (navState[0]) {
    case 2:
      document.getElementById('helpArt').style.display = 'none';
      document.getElementById('helpArt').style.opacity = '0';
      document.querySelector('.navButtonsCover[data-child="helpButton"]').style.backgroundColor = 'transparent';
      break;
    case 3:
      document.getElementById('codeArt').style.display = 'none';
      document.getElementById('codeArt').style.opacity = '0';
      document.querySelector('.navButtonsCover[data-child="code"]').style.backgroundColor = 'transparent';
      break;
    default: break;
    }
  } else {
    switch (n) {
    case 1:
      if (location.hash) {
        location.href = location.href.split(location.hash)[0];
      }
      navState[0] = 1;
      break;
    case 2:
      document.getElementById('bg1').classList.remove('ball');
      document.querySelector('.navButtonsCover[data-child="helpButton"]').style.backgroundColor = 'rgba(0,0,0,0.5)';
      setTimeout(function () {
        fx('helpArt').fadeIn(200);
        document.getElementById('bg1').style.height = 'auto';
        document.getElementById('mainPage').style.display = 'none';
      }, 500);
      setTimeout(function () {
        navState[1] = 0;
      }, 1000);
      navState = [2, 1];
      break;
    case 3:
      document.getElementById('bg1').classList.remove('ball');
      document.querySelector('.navButtonsCover[data-child="code"]').style.backgroundColor = 'rgba(0,0,0,0.5)';
      setTimeout(function () {
        fx('codeArt').fadeIn(200);
        document.getElementById('bg1').style.height = 'auto';
        document.getElementById('mainPage').style.display = 'none';
      }, 500);
      setTimeout(function () {
        navState[1] = 0;
      }, 1000);
      navState = [3, 1];
      break;
    case 4:
      shareFunc(true);
      navState[0] = 4;
      break;
    default: break;
    }
  }
}

var usernameKeyUp = [false, false];
// eslint-disable-next-line no-unused-vars
var usernameKeyUpInter;
function usernameKeyUpFunc() {
  var value = document.getElementById('username').value.trim();
  if (!internet) {
    document.getElementById('username').value = 'Refresh the page';
    return;
  }
  if (!value || value === 'Not Found!' || value === 'Loading...' || value === 'Refresh the page') {
    document.getElementById('suggest').style.display = 'none';
    clearInterval(usernameKeyUpInter);
    usernameKeyUp = [false, false];
    if (isTutorialOn[0]) {
      tutorial(1);
    }
    return;
  }
  ajx('https://www.googleapis.com/youtube/v3/search?part=snippet&q=' + encodeURIComponent(value) + '&type=channel&maxResults=5&relevanceLanguage=en&key=' + getKey(),
    function (e) {
      try {
        if (!e.items) {
          noConnection('undef e.items in username keyup (script.js)', true);
          return;
        }
        if (e.pageInfo.totalResults < 1) {
          // if no result found, return
          return;
        }// else
        // show results in suggestions
        var suggests = document.querySelectorAll('.suggest');
        suggests.forEach(function (s, x) {
          s.style.display = 'block';
          s.dataset.id = e.items[x].snippet.channelId.trim();
        });
        document.querySelectorAll('.suggest div').forEach(function (s, x) {
          try {
            s.dataset.id = e.items[x].snippet.channelId.trim();
            s.textContent = e.items[x].snippet.title;
          } catch (err) {
            suggests[x].style.display = 'none';
          }
        });
        document.querySelectorAll('.suggestImg').forEach(function (s, x) {
          try {
            s.dataset.id = e.items[x].snippet.channelId.trim();
            s.src = e.items[x].snippet.thumbnails.default.url;
          } catch (err) {
            suggests[x].style.display = 'none';
          }
        });
      } catch (err) {
        noConnection(err, true);
      }
    }, function () {
      noConnection('username keyup no ajx response (script.js)', true);
    });
}
document.getElementById('username').addEventListener('keyup', function () {
  if (!usernameKeyUp[0]) {
    usernameKeyUp[0] = true;
    usernameKeyUp[1] = true;
    document.getElementById('suggest').style.display = 'block';

    if (isTutorialOn[0]) {
      tutorial(2);
    }

    usernameKeyUpInter = setInterval(function () {
      if (usernameKeyUp[1]) {
        usernameKeyUpFunc();
        usernameKeyUp[1] = false;
      }
    }, 1000);
  } else {
    usernameKeyUp[1] = true;
  }
});

// this shows/hides the sharable link of the page.
function linkshare() {
  fx('pageUrl').fadeIn(250);
  fx('bg2').fadeIn(500);
  if (!username || !location.hash.split('#!/')[1])document.querySelector('#pageUrl input').value = 'https://youcount.github.io/';
}
for (var l = 50; l > 0; l--)views.push(l);
function pushViews(url, i) {
  ajx(url, function (e) {
    views[i] = e.items[0].statistics.viewCount;
    if (i === ((vids * 2) - 1))upCharts();
  });
}
// this is used to show/hide the chart.
// if the chart is loading for the first time (ie firstload=0),
// first the script of chart is downloaded and then it is loaded.
function extrabutton() {
  if (!username) tutorial();
  else if (firstload === 0) {
    if (!internet || notFound || isTutorialOn[0]) return;
    document.getElementById('showextra').innerHTML = 'LOADING...';
    var reqType = (username.length >= 24 && username.substr(0, 2).toUpperCase() === 'UC') ? 'id' : 'forUsername';
    var url = 'https://www.googleapis.com/youtube/v3/channels?part=contentDetails&' + reqType + '=' + username + '&fields=items/contentDetails/relatedPlaylists/uploads&key=' + getKey();
    try {
      ajx(url, function (e) {
        if (!e.items[0].contentDetails.relatedPlaylists.uploads) {
          noConnection( '2. undef e.items[0].contentDetails.relatedPlaylists.uploads in extrabutton(script.js)');
          return;
        }
        var url2 = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=' + e.items[0].contentDetails.relatedPlaylists.uploads + '&maxResults=50&fields=items/snippet/resourceId/videoId&key=' + getKey();
        ajx(url2, function (f) {
          if (!f.items) {
            noConnection( '3. undef e.items in extrabutton(script.js)');
            return;
          }
          for (var i = 0; f.items[i]; i++) {
            var url3 = 'https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + f.items[i].snippet.resourceId.videoId + '&fields=items/statistics/viewCount&key=' + getKey();
            pushViews(url3, i);
          }
          getScript('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js', function () {
            isChart = 1;
            fx('showextra').fadeOut();
            document.getElementById('hideextra').style.display = 'block';
            document.getElementById('extraContent').style.display = 'block';
            extraswitch = 1;

            var data1 = [];
            var labels1 = [];
            for (var j = 0; i < vids; j++) {
              data1[j] = views[j];
              labels1[j] = '';
            }
            var myLineChart2Data = {
              labels: labels1,
              datasets: [{
                label: 'Views of last ' + vids + ' videos',
                fill: false,
                borderColor: 'rgba(255,50,50,0.5)',
                pointBorderColor: 'rgba(255,50,50,0.5)',
                pointBackgroundColor: 'rgba(255,50,50,1)',
                data: data1
              }]
            };
            myLineChart2 = new Chart(document.getElementById('myChart2').getContext('2d'), {
              type: 'line',
              data: myLineChart2Data,
              gridLines: {
                display: false
              },
              responsive: true,
              maintainAspectRatio: false
            });
            var totviews = [(function () {
              var tot = 0;
              for (var k = 0; k < vids; k++) {
                tot += Number(views[k]);
              }
              return tot;
            })(), (function () {
              var tot = 0;
              for (var x = vids; x < (vids * 2); x++) {
                tot += Number(views[x]);
              }
              return tot;
            })()];
            var data2 = [Math.floor(totviews[0] / vids), Math.floor(totviews[1] / vids)];
            var labels2 = ['last ' + vids + ' videos', 'last to last ' + vids + ' videos'];
            var myLineChart3Data = {
              labels: labels2,
              datasets: [{
                label: 'Average Views',
                borderColor: ['rgba(0,0,255,1)', 'rgba(0,255,0,1)'],
                backgroundColor: ['rgba(50,50,255,0.2)', 'rgba(50,255,50,0.2)'],
                hoverBackgroundColor: ['rgba(0,0,255,1)', 'rgba(0,255,0,1)'],
                data: data2
              }]
            };
            myLineChart3 = new Chart(document.getElementById('myChart3').getContext('2d'), {
              type: 'bar',
              data: myLineChart3Data,
              gridLines: {
                display: false
              },
              responsive: true,
              maintainAspectRatio: false
            });
            var data3 = [totviews[0], totviews[1]];
            var labels3 = ['last ' + vids + ' videos (total views)', 'last to last ' + vids + ' videos (total views)'];
            var myLineChart4Data = {
              labels: labels3,
              datasets: [{
                label: 'Total Views',
                borderColor: ['rgba(0,0,255,1)', 'rgba(0,255,0,1)'],
                backgroundColor: ['rgba(50,50,255,0.2)', 'rgba(50,255,50,0.2)'],
                hoverBackgroundColor: ['rgba(0,0,255,1)', 'rgba(0,255,0,1)'],
                data: data3
              }]
            };
            myLineChart4 = new Chart(document.getElementById('myChart4').getContext('2d'), {
              type: 'doughnut',
              data: myLineChart4Data,
              gridLines: {
                display: false
              },
              responsive: true,
              maintainAspectRatio: false
            });
            var url4 = 'https://www.googleapis.com/youtube/v3/channels?part=statistics&' + reqType + '=' + username + '&fields=items/statistics(videoCount,viewCount)&key=' + getKey();
            ajx(url4, function (b) {
              if (!b.items[0].statistics.videoCount || !b.items[0].statistics.viewCount) {
                noConnection( '4. undef b.items[0].statistics.videoCount or b.items[0].statistics.viewCount in extrabutton(script.js)');
                return;
              }
              changeText(document.getElementById('totalVideos'), b.items[0].statistics.videoCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));
              changeText(document.getElementById('totalViews'), b.items[0].statistics.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));
            });
          });
        });
      }, function () {
        noConnection('1. extrabutton no response from ajx (script.js)');
      });
    } catch (e) {
      noConnection(e);
    }
    firstload = 1;
    upCharts();
  } else {
    document.getElementById('showextra').innerHTML = 'SHOW STATS';
    if (extraswitch === 0) {
      isChart = 1;
      fx('showextra').fadeOut();
      fx('hideextra').fadeIn();
      document.getElementById('extraContent').style.display = 'block';
      extraswitch = 1;
    } else {
      myLineChart1.destroy();
      fx('showextra').fadeIn();
      fx('hideextra').fadeOut(100);
      document.getElementById('extraContent').style.display = 'none';
      extraswitch = 0;
      isChart = 0;
    }
  }
}

function upCharts() {
  if (!firstload) {
    noConnection('upCharts was called before firstload==1', true);
    return;
  }
  vids = Number(document.getElementById('vids').value);
  if (vids > 25) {
    document.getElementById('vids') = vids = 25;

  }
  var sum1 = 0;
  var sum2 = 0;
  for (var i = 0; i < vids; i++) {
    myLineChart2.data.labels[i] = '';
    myLineChart2.data.datasets[0].data[i] = views[i];
    sum1 += Number(views[i]);
  }
  for (i = vids; i < (vids * 2); i++)sum2 += Number(views[i]);
  myLineChart2.data.labels.splice(vids);
  myLineChart2.data.datasets[0].data.splice(vids);
  myLineChart2.data.datasets[0].label = 'Views of last ' + vids + ' videos';

  myLineChart3.data.labels = ['last ' + vids + ' videos', 'last to last ' + vids + ' videos'];
  myLineChart3.data.datasets[0].data[0] = Math.floor(sum1 / vids);
  myLineChart3.data.datasets[0].data[1] = Math.floor(sum2 / vids);

  myLineChart4.data.labels = ['last ' + vids + ' videos (total views)', 'last to last ' + vids + ' videos (total views)'];
  myLineChart4.data.datasets[0].data[0] = sum1;
  myLineChart4.data.datasets[0].data[1] = sum2;

  myLineChart2.update();
  myLineChart3.update();
  myLineChart4.update();
}
if (internet) {
  //downloads social and assigns it as background at the end.
  document.querySelectorAll('.share').forEach(function(e){
    e.style.backgroundImage = 'url(/images/social.png)';
  });
  // images are loaded after the whole page is loaded (since it has a big download size and sends multiple requests).
  /*
  var images = document.getElementsByTagName('img');
  for (var pl = 0; pl < images.length; pl++) {
    if (!images[pl].src && images[pl].id && images[pl].id !== 'dp') {
      images[pl].src = '/images/' + images[pl].id + '.png';
    }
  
  }
  */
}