var myStreams = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404", "totallynotexistingname"];

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

function updateUIaddChannel(UIParams) {

  var newChannel = "";

  // apply an HTML template to the channel/stream info
  newChannel += '<li class="list-group-item '+ (UIParams.streamInfo.online?"online":"offline") +'">';
  newChannel += '<div class="row align-items-center">';
  // logo
  // name
  newChannel += '<div class="col col-xs-2">';
  var imgSrc = UIParams.channelInfo.logo?UIParams.channelInfo.logo:"https://static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_70x70.png";
  newChannel += '<img class="img-responsive img-circle" src="' + imgSrc + '"title="' + UIParams.channelInfo.name + '"  alt="' + UIParams.channelInfo.name + '">';
  newChannel += '</div><!-- col -->';

  newChannel += '<div class="col col-xs-10">';
  // name
  newChannel += '<div><h4>[';
  if (UIParams.channelInfo.url) {
    newChannel += '<a href="' + UIParams.channelInfo.url + '" target="_blank"> ';
  }
  newChannel += UIParams.channelInfo.name;
  if (UIParams.channelInfo.url) {
    newChannel += '</a>';
  }
  newChannel += ' ]</h4></div>';
  // description
  if (UIParams.streamInfo.online) {
    newChannel += '<div><span class="itemSnippet"><b>' +  UIParams.streamInfo.game + '</b> - ';
    newChannel += '' +  UIParams.channelInfo.status + ' ';
    newChannel += ' <div><span class="label label-success" title="Viewers">' +  UIParams.streamInfo.viewers + '</span>';
    newChannel += ' <span class="label label-primary" title="Views">' +  UIParams.channelInfo.views + '</span></div>';
    newChannel += '</div>';
  } else if (UIParams.channelInfo.notfound && UIParams.channelInfo.notfound === true) {
    newChannel += '<div class="itemSnippet"><span class="label label-danger">not found</span></div>';
  } else {
    newChannel += '<div class="itemSnippet"><span class="label label-default">offline</span></div>';
  }
  newChannel += '</div><!-- col -->';

  newChannel += '</div><!-- row -->';
  newChannel += '</li>';

  // append the new channel info to the list
  $("#TwitchTVChannelsList").append(newChannel);

  console.log("update UI");
  console.log(UIParams);
}

function formatChannel(channel) {
  return {
    name: channel.name,
    logo: channel.logo,
    url: channel.url,
    status: channel.status,
    views: channel.views
  };
}
function formatNotFoundData(channel) {
  var streamInfo = { online: false };
  var channelInfo = {
    name: channel,
    logo: null,//"https://www.twitch.tv/images/xarth/bg_glitch_pattern.png",
    url: null,
    status: "",
    views: 0,
    notfound: true
  };
  console.log("format not found data");
  console.log(channel);
  return {
    streamInfo: streamInfo,
    channelInfo: channelInfo
  };

}
function formatData(response) {
  // convert response into UIParams

  var streamInfo = { online: false };
  var channelInfo = {};
  if (response.stream) {
    // the channel is currently streaming
    streamInfo.online = true;
    // inside there is also the the channel info
    if (response.stream.game) {
      streamInfo.game = response.stream.game;
    }
    streamInfo.viewers = response.stream.viewers;
    if (response.stream.links && response.stream.links.self) {
      streamInfo.link = response.stream.links.self;
    }
    if (response.stream.channel) {
      channelInfo = formatChannel(response.stream.channel);
    }
  } else {
    // the channel is not streaming and
    // this is only the channel info
    channelInfo = formatChannel(response);
  }
  console.log("format data");
  console.log(response);
  return {
    streamInfo: streamInfo,
    channelInfo: channelInfo
  };
}

function fetchChannel(channel) {

  // api.twitch.tv requires now the Client-ID
  // https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843

  $.ajax({
    type: 'GET',
    url: 'https://api.twitch.tv/kraken/channels/' + channel,
    headers: {
      'Client-ID': '1l1xqs7sgng638sq5pfe0xu0rpum9m' // lorepirri's Client-ID, this can be public, no problem
    },
    success: function(response) {
      console.log('channel success!');
      updateUIaddChannel(formatData(response)); // update UI
    },
    error: function(err) {
      console.error("channel error!");
      if (err.status && err.status === 404) {
        console.error("error channel not found");
        updateUIaddChannel(formatNotFoundData(channel));
      }
    }
  });

}

function fetchChannelsStream(channel) {

    // api.twitch.tv requires now the Client-ID
    // https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843

  $.ajax({
    type: 'GET',
    url: 'https://api.twitch.tv/kraken/streams/' + channel,
    headers: {
      'Client-ID': '1l1xqs7sgng638sq5pfe0xu0rpum9m' // lorepirri's Client-ID, this can be public, no problem
    },
    success: function(response) {
      console.log('stream success!');
      if (response.stream) {
        updateUIaddChannel(formatData(response)); // update UI
      } else {
        fetchChannel(channel);
      }
    },
    error: function(err) {
      console.error(err);
      console.error("stream error!");
    }
  });

}

function fetchData() {

  myStreams.forEach(fetchChannelsStream);
}

function filterChannelsByStatus(status) {
  switch (status) {
    case "Online":
      $('.online').removeClass("hidden");
      $('.offline').addClass("hidden");
      break;
    case "Offline":
      $('.online').addClass("hidden");
      $('.offline').removeClass("hidden");
      break;
    default:
      $('.online').removeClass("hidden");
      $('.offline').removeClass("hidden");
      break;
  }
}

$(document).ready(function() {

  fetchData(); // first fetch on page ready

  // on filter channel status change
  $('.dropdown-menu li a').click(function (e) {
      var newHeading = $(this).text();
      var $heading = $('.dropdown-toggle');
      var $caret = $('.caret', $heading);
      $heading.html(newHeading + ' ').append($caret);
      filterChannelsByStatus(newHeading);
  });


});