var video_data = JSON.parse(document.getElementById("video_data").textContent);

var spinnerHTML =
  '<div class="loading"><i class="icon ion-ios-refresh"></i></div>';
var spinnerHTMLwithHR = spinnerHTML + "<hr>";

String.prototype.supplant = function (o) {
  return this.replace(/{([^{}]*)}/g, function (a, b) {
    var r = o[b];
    return typeof r === "string" || typeof r === "number" ? r : a;
  });
};

function toggle_comments(event) {
  const target = event.target;
  const comments = document.querySelector(".comments");
  if (comments.style.display === "none") {
    target.textContent = "−";
    comments.style.display = "";
  } else {
    target.textContent = "+";
    comments.style.display = "none";
  }
}

function hide_youtube_replies(event) {
  var target = event.target;

  var sub_text = target.getAttribute("data-inner-text");
  var inner_text = target.getAttribute("data-sub-text");

  var body = target.parentNode.parentNode.children[1];
  body.style.display = "none";

  target.textContent = sub_text;
  target.onclick = show_youtube_replies;
  target.setAttribute("data-inner-text", inner_text);
  target.setAttribute("data-sub-text", sub_text);
}

function show_youtube_replies(event) {
  var target = event.target;
  console.log(target);

  var sub_text = target.getAttribute("data-inner-text");
  var inner_text = target.getAttribute("data-sub-text");

  var body = target.parentNode.parentNode.children[1];
  body.style.display = "";

  target.textContent = sub_text;
  target.onclick = hide_youtube_replies;
  target.setAttribute("data-inner-text", inner_text);
  target.setAttribute("data-sub-text", sub_text);
}

function get_youtube_comments() {
  var comments = document.getElementById("comments");

  var fallback = comments.innerHTML;
  comments.innerHTML = spinnerHTML;

  var baseUrl = video_data.base_url || "/api/v1/comments/" + video_data.id;
  var url =
    baseUrl +
    "?format=html" +
    "&hl=" +
    video_data.preferences.locale +
    "&thin_mode=" +
    video_data.preferences.thin_mode;

  if (video_data.ucid) {
    url += "&ucid=" + video_data.ucid;
  }

  var onNon200 = function (xhr) {
    comments.innerHTML = fallback;
  };
  if (video_data.params.comments[1] === "youtube") onNon200 = function (xhr) {};

  helpers.xhr(
    "GET",
    url,
    { retries: 5, entity_name: "comments" },
    {
      on200: function (response) {
        var commentInnerHtml =
          ' \
							<nav class="comments-header"> \
								<ul> \
                <li> \
                    <button class="secondary" id="toggle-comments">−</button> \
                    {commentsText}  \
                </li> \
                 \
                <li>';
        if (video_data.support_reddit) {
          commentInnerHtml +=
            ' <button  data-comments="reddit"> \
                        {redditComments} \
                    </button> \
                    ';
        }
        commentInnerHtml +=
          ' </li> \
								</ul> \
            </nav> \
            <div class="comments">{contentHtml}</div>';
        commentInnerHtml = commentInnerHtml.supplant({
          contentHtml: response.contentHtml,
          redditComments: video_data.reddit_comments_text,
          commentsText: video_data.comments_text.supplant({
            // toLocaleString correctly splits number with local thousands separator. e.g.:
            // '1,234,567.89' for user with English locale
            // '1 234 567,89' for user with Russian locale
            // '1.234.567,89' for user with Portuguese locale
            commentCount: response.commentCount.toLocaleString(),
          }),
        });
        comments.innerHTML = commentInnerHtml;
        document.getElementById("toggle-comments").onclick = toggle_comments;
        if (video_data.support_reddit) {
          comments.children[1].children[1].onclick = swap_comments;
        }
      },
      onNon200: onNon200, // declared above
      onError: function (xhr) {
        comments.innerHTML = spinnerHTML;
      },
      onTimeout: function (xhr) {
        comments.innerHTML = spinnerHTML;
      },
    },
  );
}

function get_youtube_replies(target, load_more, load_replies) {
  var continuation = target.getAttribute("data-continuation");

  var body = target.parentNode;
  var fallback = body.innerHTML;
  body.innerHTML = spinnerHTML;
  var baseUrl = video_data.base_url || "/api/v1/comments/" + video_data.id;
  var url =
    baseUrl +
    "?format=html" +
    "&hl=" +
    video_data.preferences.locale +
    "&thin_mode=" +
    video_data.preferences.thin_mode +
    "&continuation=" +
    continuation;

  if (video_data.ucid) {
    url += "&ucid=" + video_data.ucid;
  }
  if (load_replies) url += "&action=action_get_comment_replies";

  helpers.xhr(
    "GET",
    url,
    {},
    {
      on200: function (response) {
        if (load_more) {
          body = body.parentNode;
          body.removeChild(body.lastElementChild);
          body.insertAdjacentHTML("beforeend", response.contentHtml);
        } else {
          body.removeChild(body.lastElementChild);

          var div = document.createElement("div");
          var button = document.createElement("button");
          div.appendChild(button);

          button.onclick = hide_youtube_replies;
          button.setAttribute("data-sub-text", video_data.hide_replies_text);
          button.setAttribute("data-inner-text", video_data.show_replies_text);
          button.textContent = video_data.hide_replies_text;

          var div = document.createElement("div");
          div.innerHTML = response.contentHtml;

          body.appendChild(div);
        }
      },
      onNon200: function (xhr) {
        body.innerHTML = fallback;
      },
      onTimeout: function (xhr) {
        console.warn("Pulling comments failed");
        body.innerHTML = fallback;
      },
    },
  );
}