function render_comments(comments) {
  for (var i = 0; i < comments.length; i++) {
    var comment = comments[i];
    var html = '';

    var ago = moment.unix(comment.publish_ts).calendar();

    html += '<div class="column is-full">';
    html += '<div class="card">';
    html += '<div class="card-content">';
    html += '<div class="media">';
    html += '<div class="media-left">';
    html += '<figure class="image is-64x64">';
    html += '<a href="/user/' + String(comment.author_id) + '"><img id="avatar_' + String(comment.id) + '" src="/static/avatars/default/default.128.png"></a>';
    html += '</figure>';
    html += '</div>';
    html += '<div class="media-content" style="overflow-x: hidden;">';
    html += '<div class="content">';
    html += '<p>';
    html += '<strong ><a id="username_' + String(comment.id) + '" href="/user/' + String(comment.author_id) + '">the void</a></strong> <small>' + ago + '</small>';
    html += '<br>';
    html += '<div class="content" style="word-break: break-all;">';
    html += comment.text;
    html += '</div>';
    html += '</p>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
    html += '</div>';

    $('#comments').append(html);

    api('user', {user_id: comment.author_id}, function (data, additional_data) {  
      var comment_id = additional_data[0];

      $('#avatar_' + String(comment_id)).attr('src', data.avatar128);
      $('#username_' + String(comment_id)).text(data.username);
    }, comment.id);
  }

  if (comments.length >= 5) {
    window.offset += comments.length;

    $(window).bind('scroll', load_more);
  }
}

function update_comments() {
  api('comments', {video_id: window.video_id, offset: window.offset}, function (data) {
    $('#comments_count').text(data.comments_count);
    $('#comments_count_suffix').text(data.comments_count != 1? 's': '');

    render_comments(data.comments);
  });
}

function load_more() {
  if (!scrolled_down(100))
    return;
  
  update_comments() 

  $(window).unbind('scroll', load_more);
}

$(function () {
  window.offset = 0;
  window.player = new Plyr('#player');
  
  var last_video_id = window.video_id - 1;
  var next_video_id = window.video_id + 1;

  if (window.my_user_id < 0) {
    $('#comment_field').prop('disabled', true);
    $('#comment_field').attr('placeholder', 'You must log in to write comments.');

    $('#send_comment_field').hide();
  }

  $('#upload_date').text(moment.unix(window.video_upload_ts).calendar());

  $('#likes_icon').click(function () {
    if (window.my_user_id < 0) {
      popup('danger', 'You must be logged in to like videos.');

      return;
    }
    
    api('liked', {video_id: window.video_id}, function (data) {
      api(data.is_liked? 'unlike': 'like', {video_id: window.video_id}, function (data) {
        $('#likes_count').text(data.likes_count);
      });

      if (data.is_liked)
        $('#likes_icon').removeClass('liked');
      else
        $('#likes_icon').addClass('liked');
    });
  });

  api('likes', {video_id: window.video_id}, function (data) {
    $('#likes_count').text(data.likes_count);
  });

  if (window.my_user_id >= 0)
    api('liked', {video_id: window.video_id}, function (data) {
      if (data.is_liked)
        $('#likes_icon').addClass('liked');
    });

  api('exists', {video_id: last_video_id}, function (data) {
    if (data.is_exists) {
      $('#last_button').prop('disabled', false);

      $('#last_button').click(function () {
        document.location.href = '/watch/' + String(last_video_id);
      });
    }
  });

  api('exists', {video_id: next_video_id}, function (data) {
    if (data.is_exists) {
      $('#next_button').prop('disabled', false);

      $('#next_button').click(function () {
        document.location.href = '/watch/' + String(next_video_id);
      });
    }
  });

  $('#send_comment').click(function () {
    var text = $('#comment_field').val().trim();

    if (text.length < 2)
      return;

    $('#comment_field').val('');
    $('#send_comment').addClass('is-loading');

    api('comment', {video_id: window.video_id, text: text}, function () {
      $('#comments').html('');
      $('#characters_left').text('256');

      window.offset = 0;

      update_comments();

      $('#send_comment').removeClass('is-loading');
    });
  });

  api('user', {user_id: window.video_uploader_id}, function (data) {
    $('#uploader_avatar').attr('src', data.avatar128);
    $('#uploader_username').text(data.username);
    $('#uploader_username').attr('href', '/user/' + String(window.video_uploader_id));
  });

  api('tags', {video_id: window.video_id}, function (data) {
    for (var i = 0; i < data.tags_list.length; i++) {
      var html = '';

      html += '<a class="tag is-light" href="/search?q=' + data.tags_list[i] + '">';
      html += data.tags_list[i];
      html += '</a>'

      $('#tags').append(html);
    }
  });

  update_comments();

  $('textarea').each(function () {
    this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;resize:none;');
  }).on('input', function () {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px';
  });

  $('#comment_field').keyup(function () {
    if ($('#comment_field').val().length > 256) 
      $('#comment_field').val($('#comment_field').val().slice(0, 256));

    $('#characters_left').text(256 - $('#comment_field').val().length);
  });
});