// Cookie name
const article_like =
  commPageLanguage() + "article_like_" + $(".blog.detail").attr("data-id");
const comment_like =
  commPageLanguage() + "comment_like_" + $(".blog.detail").attr("data-id");
let likeArticleInfo = {};
let likeCommentInfo = {};
const contentInfo = {
  es: {
    like: "Me gusta",
    replies: "respuestas",
    reply: "respuesta",
    add: "Añade una respuesta",
    replyBtn: "Responder",
    cancelBtn: "Cancelar",
  },
  pl: {
    like: "Podoba mi się",
    replies: "odpowiedzi",
    reply: "odpowiedź",
    add: "Dodaj komentarz",
    replyBtn: "Skomentuj",
    cancelBtn: "Anuluj",
  },
  de: {
    like: "Mag ich",
    replies: "Antworten",
    reply: "Antwort",
    add: "Antwort hinzufügen",
    replyBtn: "Antworten",
    cancelBtn: "Abbrechen",
  },
  ru: {
    like: "Нравится",
    replies: "ответы",
    reply: "ответ",
    add: "Добавить ответ",
    replyBtn: "Ответить",
    cancelBtn: "Отменить",
  },
  fr: {
    like: "J'aime",
    replies: "Réponses",
    reply: "Réponse",
    add: "Ajouter une réponse",
    replyBtn: "Répondre",
    cancelBtn: "Annuler",
  },
  it: {
    like: "Mi piace",
    replies: "risposte",
    reply: "risposta",
    add: "Aggiungi una risposta",
    replyBtn: "Rispondi",
    cancelBtn: "Annulla",
  },
  pt: {
    like: "Gostei",
    replies: "respostas",
    reply: "resposta",
    add: "Adicione uma resposta",
    replyBtn: "Responder",
    cancelBtn: "Cancelar",
  },
  nl: {
    like: "Ik vind dit leuk",
    replies: "antwoorden",
    reply: "antwoord",
    add: "Voeg een antwoord toe",
    replyBtn: "Antwoord",
    cancelBtn: "Annuleren",
  },
  jp: {
    like: "いいね",
    replies: "返信",
    reply: "返信",
    add: "返信を追加",
    replyBtn: "返信",
    cancelBtn: "キャンセル",
  },
  ar: {
    like: "لايك",
    replies: "ردود",
    reply: "رد",
    add: "إضافة رد...",
    replyBtn: "رد",
    cancelBtn: "إلغاء",
  },
};

let socialEle = document.getElementById("social-position");
let articleEle = document.getElementById("articleCnt");
let articlePosition = articleEle.getBoundingClientRect();
console.log("🚀 ~ articlePosition:", articlePosition);
let distanceToTop = articleEle.offsetTop;

const setSocialPosition = () => {
  articlePosition = articleEle.getBoundingClientRect();
  let socialPosition = Math.abs(articlePosition.left - 68);
};

setSocialPosition();

// console.log(distanceToTop)

let screenWidth =
  window.innerWidth ||
  document.documentElement.clientWidth ||
  document.body.clientWidth;

window.addEventListener("resize", function () {
  setSocialPosition();
  // if (screenWidth < 1200) {
  // 	$(".contents .left-menu-arrow").addClass('menu-close');
  // 	$('body .article-cnt .contents > dl').hide();
  // }
});

$(".article-box")
  .off("click")
  .on("click", ".left-menu-arrow", function (evt) {
    if ($(this).hasClass("menu-close")) {
      $(this).removeClass("menu-close");
      $("body .article-cnt .contents > dl").show();
      $("#articleCnt, .blog.detail").css("--sw", "250px");
    } else {
      $(this).addClass("menu-close");
      $("body .article-cnt .contents > dl").hide();
      $("#articleCnt, .blog.detail").css("--sw", "0px");
    }
    setSocialPosition();
  });

const clickJump = (param) => {
  // console.log(param)
  $(param.click)
    .off("click")
    .on("click", function (evt) {
      evt.stopPropagation();
      let yoffset = 0;
      if (!param.offset) yoffset = 0;
      else yoffset = param.offset;
      let menuHeigth = $(param.target).offset().top - yoffset;
      $("html, body").animate(
        {
          scrollTop: menuHeigth,
        },
        "slow"
      );
    });
};

clickJump({
  click: ".td-icon-comments",
  target: "#comments",
  offset: 100,
});

function isBlogBlank(data) {
  if (
    data == null ||
    data === "null" ||
    data === "" ||
    data === undefined ||
    data === "undefined" ||
    data === "unknown"
  ) {
    return true;
  } else {
    return false;
  }
}

const singularAndPlural = () => {
  if (commPageLanguage() == "pl") {
    if ($(".comments-list-title").attr("data-num") == 1)
      $(".comments-list-title").html(
        $(".comments-list-title").attr("data-one")
      );
    else if (
      $(".comments-list-title").attr("data-num") >= 2 &&
      $(".comments-list-title").attr("data-num") <= 4
    ) {
      $(".comments-list-title").html(
        $(".comments-list-title").attr("data-two")
      );
    } else
      $(".comments-list-title").html(
        $(".comments-list-title").attr("data-other")
      );
  } else {
    if ($(".comments-list-title").attr("data-num") == 1)
      $(".comments-list-title").html(
        $(".comments-list-title").attr("data-one")
      );
    else
      $(".comments-list-title").html(
        $(".comments-list-title").attr("data-other")
      );
  }

  if (
    isBlogBlank($(".reading-time").attr("data-time")) ||
    $(".reading-time").attr("data-time") == 0
  )
    $("[data-type='reading-time']").hide();
  else $("[data-type='reading-time']").show();
};
singularAndPlural();

// 提交评论
$(".submit-input").each(function (i, v) {
  $(v).focus(function () {
    $(v).removeClass("comment-err");
  });
});

let checks = {
  name: false,
  email: false,
  content: false,
};

let commentParams = {
  name: "",
  article_id: "",
  id: "0",
  email: "",
  content: "",
  language: $("html").attr("lang").substring(0, 2),
};

const onCheckEmail = (email) => {
  const email_reg = new RegExp(
    "^\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]*\\.)+[A-Za-z]{2,14}$"
  );
  return email_reg.test(email);
};

const sendComment_Event = ({ params, type }) => {
  // console.log(params)
  // console.log(type)
  ajaxCallback(
    {
      url: "api/isr-new-blog-comment",
      type: "POST",
      data: params,
    },
    function (res) {
      // console.log(res)
      if (type == "new") {
        if (res.status === "ok") {
          $(".comment-submit").removeClass("submit-disabled");
          $(".submit-input").each(function (i, v) {
            $(v).val("");
          });
          if ($(".comments-area>.comment-item").length <= 10) {
            getCommenList_Event({
              article_id: $(".blog.detail").attr("data-id"),
              page: 1,
            });
            $(".comments-more").css("pointer-events", "none").hide();
          } else {
            $(".comments-more").css("pointer-events", "auto").show();
          }
          $(".comments-count,.comments-title-number").html(
            res.data.commentCount
          );
          $(".comments-count,.comments-list-title").attr(
            "data-num",
            res.data.commentCount
          );
          singularAndPlural();
        }
      } else if (type == "reply") {
      }
    }
  );
};

$(".comment-submit")
  .off("click")
  .click(function (evt) {
    $(".submit-input").each(function (i, v) {
      if ($(v).attr("name") == "email") {
        if (!onCheckEmail($(v).val())) {
          $(v).addClass("comment-err");
          checks[$(v).attr("name")] = false;
        } else {
          checks[$(v).attr("name")] = true;
          commentParams[$(v).attr("name")] = $(v).val();
        }
      } else {
        if (isBlogBlank($(v).val().trim())) {
          $(v).addClass("comment-err");
          checks[$(v).attr("name")] = false;
        } else {
          checks[$(v).attr("name")] = true;
          commentParams[$(v).attr("name")] = $(v).val();
        }
      }
    });

    // console.log(checks)

    if (checks.name && checks.email && checks.content) {
      // console.log("all right")
      $(".comment-submit").addClass("submit-disabled");
      commentParams.article_id = $(".blog.detail").attr("data-id");
      // console.log(commentParams)
      sendComment_Event({
        params: commentParams,
        type: "new",
      });
    }
  });

// 文章点赞
const sendBlogLike_Event = (params) => {
  ajaxCallback(
    {
      url: "api/isr-blog-like",
      type: "POST",
      data: params,
    },
    function (res) {
      // console.log(res)
      if (res.status === "ok") {
        $(".post-icons-container .article-like").css("pointer-events", "auto");
        likeArticleInfo = getStorage(article_like);
        if (!!params.isdel) {
          // console.log("Unlike");
          likeArticleInfo.status = false;
        } else {
          // console.log("Like");
          likeArticleInfo.status = true;
        }
        // console.log("🚀 ~ likeArticleInfo:", likeArticleInfo);
        setStorage(article_like, likeArticleInfo);
      } else {
        $(".post-icons-container .article-like").css("pointer-events", "auto");
      }
    }
  );
};

if (commIsBlank(getStorage(article_like))) {
  likeArticleInfo = {};
  likeArticleInfo.status = false;
  setStorage(article_like, likeArticleInfo);
}

// console.log("🚀 ~ article_like:", getStorage(article_like))
if (!!getStorage(article_like).status) {
  // console.log("Like");
  $(".post-icons-container .article-like").addClass("clicked");
} else {
  // console.log("Unlike");
  $(".post-icons-container .article-like").removeClass("clicked");
}

$(".post-icons-container").on("click", ".article-like", function (evt) {
  let zNum = $(".post-icons-container .claps-count").html();
  $(this).css("pointer-events", "none");
  if ($(this).is(".clicked")) {
    zNum--;
    $(this).removeClass("clicked");
    $(".post-icons-container .claps-count").html(zNum);
    sendBlogLike_Event({
      id: $(".blog.detail").attr("data-id"),
      isdel: 1,
    });
  } else {
    zNum++;
    $(this).addClass("clicked");
    $(".post-icons-container .claps-count").html(zNum);
    sendBlogLike_Event({
      id: $(".blog.detail").attr("data-id"),
    });
  }
});

function getActualWidthOfChars(text, options = {}) {
  const { size = 14, family = "Microsoft YaHei" } = options;
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.font = `${size}px ${family}`;
  const metrics = ctx.measureText(text);
  const actual =
    Math.abs(metrics.actualBoundingBoxLeft) +
    Math.abs(metrics.actualBoundingBoxRight);
  return Math.max(metrics.width, actual);
}

const createCommenActionItem = () => {
  let commentActionHtml = "";
  commentActionHtml = `
	<div class="comment-reply-dialog">
		<div class="reply-row">
			<div class="reply-row-image"></div>
			<div class="reply-row-input">
				<input class="reply-text" type="text" value="" placeholder="${
          contentInfo[commPageLanguage()]["add"]
        }">
			</div>
		</div>
		<div class="row-action">
			<button class="action-btn reply-cancel-btn" type="button">${
        contentInfo[commPageLanguage()]["cancelBtn"]
      }</button>
			<button class="action-btn reply-sure-btn reply-disabled" type="button">${
        contentInfo[commPageLanguage()]["replyBtn"]
      }</button>
		</div>
	</div>
	`;
  return commentActionHtml;
};

const commenItem = (data, type) => {
  var itemStr = "";
  itemStr = `
		<div class="comment-author">
			<div class="author-thumbnail">
				<span class="author-comment-img img-${type}" style="${
    type == "child" ? "--avatar: url(" + _headimg + ")" : ""
  }"></span>
			</div>
			<div class="author-comment-info">
				<p class="comment-size-name">${data.name}</p>
				<span class="author-comment-time">${data.addtimestr}</span>

				<div class="comment-action-toolbar">
					<a class="pull-left">
						<i class="click-like-icon comment-like" data-id="${
              data.id
            }"  data-type="${type}" data-num="${data.like_count}" title="${
    contentInfo[commPageLanguage()]["like"]
  }"></i>
						<span class="like-num" style="display: ${
              data.like_count > 0 ? "inline-block" : "none"
            };">${data.like_count}</span>
					</a>
				</div>
			</div>
		</div>
		<div class="comment-content"><p>${data.content}</p></div>
	`;
  return itemStr;
};

const commenChildItem = (data) => {
  let childItem = "";
  if (data.childComments.length > 0) {
    for (let c = 0; c < data.childComments.length; c++) {
      childItem += commenItem(data.childComments[c], "child");
    }
    return `
			<div class="comment-child-item">
				${childItem}
			</div>
		`;
  } else return "";
};

const createCommenList = (data) => {
  let itemCommentHtml = "";
  try {
    if (data.length > 0) {
      // ${commenItem(data[i], "parent")}
      for (let i = 0; i < data.length; i++) {
        itemCommentHtml += `
				<div class="comment-item" data-id="${data[i].id}">
        ${commenItem(data[i], "parent")}
				${commenChildItem(data[i])}
				</div>
				`;
      }
      return itemCommentHtml;
    }
  } catch (err) {
    // console.log(err)
  }
};

function hasOwn(obj, propName) {
  return Object.prototype.hasOwnProperty.call(obj, propName);
}

const sendCommentLike_Event = ({ params, type }) => {
  ajaxCallback(
    {
      url: "api/isr-blog-comment-like",
      type: "POST",
      data: params,
    },
    function (res) {
      // console.log(res)
      let current_id = 0;
      if (res.status === "ok") {
        $(".comment-like").css("pointer-events", "auto");
        likeCommentInfo = getStorage(comment_like);
        current_id = "like_" + type + params.id;
        if (!!params.isdel) {
          // console.log("Comment---Unlike");
          likeCommentInfo[current_id] = false;
        } else {
          // console.log("Comment--Like");
          likeCommentInfo[current_id] = true;
        }
        // console.log("🚀 ~ likeCommentInfo:", likeCommentInfo);
        setStorage(comment_like, likeCommentInfo);
      } else {
        $(".comment-like").css("pointer-events", "auto");
      }
    }
  );
};

const commenList_Event = () => {
  // 初始化评论点赞状态
  $(".comment-like").each((i, v) => {
    if (!isBlogBlank(getStorage(comment_like))) {
      if (
        !!getStorage(comment_like)[
          "like_" + $(v).attr("data-type") + $(v).attr("data-id")
        ]
      ) {
        $(v).addClass("clicked");
      } else {
        $(v).removeClass("clicked");
      }
    }
  });

  // 是否显示用户名的 title
  $(".comment-size-name").each((i, v) => {
    let swidth = $(v).width() * 2;
    let strlen = getActualWidthOfChars($(v).html(), {
      size: 14,
      family: "Lexend",
    });
    let ellipsislen = getActualWidthOfChars("...", {
      size: 14,
      family: "Lexend",
    });
    if (parseInt(strlen) > parseInt(swidth - ellipsislen)) {
      $(v).attr("title", $(v).html());
    } else {
      $(v).attr("title", "");
    }
  });

  // 评论点赞
  let like_id = "";
  $(".comment-item")
    .on("click", ".comment-like", function (evt) {
      // console.log("like")
      let commentNum = $(this).next(".like-num").html();
      like_id = $(this).attr("data-id");

      if (commIsBlank(getStorage(comment_like))) {
        // console.log("Comment Unlike");
        likeCommentInfo = {};
				$(".comment-like").each((index, item) => {
          likeCommentInfo[
            "like_" + $(item).attr("data-type") + $(item).attr("data-id")
          ] = false;
        });
        setStorage(comment_like, likeCommentInfo);
      }

      $(this).css("pointer-events", "none");
      if ($(this).is(".clicked")) {
        commentNum--;
        $(this).removeClass("clicked");
        $(this).next(".like-num").html(commentNum);
        sendCommentLike_Event({
          params: {
            id: $(this).attr("data-id"),
            isdel: 1,
          },
          type: $(this).attr("data-type"),
        });
      } else {
				commentNum++;
        $(this).addClass("clicked");
        $(this).next(".like-num").html(commentNum);
        sendCommentLike_Event({
          params: {
            id: $(this).attr("data-id"),
          },
          type: $(this).attr("data-type"),
        });
      }

      if (commentNum > 0) $(this).next(".like-num").show();
      else $(this).next(".like-num").hide();
    })
    .on("click", ".reply-btn", function (evt) {
      // console.log('reply-btn')
      // console.log(createCommenActionItem())
      $(this).parents(".comment-item").find(".comment-reply-dialog").remove();
      $(this)
        .parents(".comment-item .comment-action")
        .append(createCommenActionItem());
    })
    .on("click", ".reply-cancel-btn", function (evt) {
      // console.log('reply-cancel-btn')
      $(this).parents(".comment-item").find(".comment-reply-dialog").hide();
    })
    .on("click", ".reply-cancel-btn", function (evt) {
      // console.log('reply-send-btn')
      sendComment_Event({
        // params: commentParams,
        // type: 'new'
      });
    })
    .on("click", ".reply-button-show", function (evt) {
      // console.log('reply-button-show')
    });

  $(document).on("input propertychange", ".reply-text", function (evt) {
    if (isBlogBlank($(this).val().trim())) {
      $(this)
        .parents(".comment-reply-dialog")
        .find(".reply-sure-btn")
        .addClass("reply-disabled");
    } else {
      $(this)
        .parents(".comment-reply-dialog")
        .find(".reply-sure-btn")
        .removeClass("reply-disabled");
    }
  });
};

// commenList_Event();
let comment = {
  _default: 10, //默认显示个数
  _loading: 10, //每次点击按钮后加载的个数
  page: 1, // 当前显示的页数
  totalPage: 0, // 总页数
};
const getCommenList_Event = (params, type) => {
  ajaxCallback(
    {
      url: "api/isr-blog-comment",
      type: "POST",
      data: params,
    },
    function (res) {
      if (res.status === "ok") {
        $(".comments-list").show();
        if (res.data.length > 0) {
          $(".comments-list").show();
        } else {
          $(".comments-list").hide();
        }
        comment.totalPage = Math.ceil(
          $(".comments-list-title").attr("data-num") / comment._default
        );
        if (
          (comment.totalPage == 1 && res.data.length <= 10) ||
          type == "add"
        ) {
          $(".comments-list .comments-area").html(createCommenList(res.data));
        } else {
          $(".comments-list .comments-area").append(createCommenList(res.data));
        }

        // console.log(comment.totalPage)
        if (comment.totalPage <= 1 || comment.page == comment.totalPage) {
          $(".comments-more").hide();
        } else {
          $(".comments-more").css("pointer-events", "auto");
          $(".comments-more").show();
          // } else {
          //   $(".comments-more").hide();
          // }
          // if (res.data.length < 10) {
          //   $(".comments-more").hide();
        }
        commenList_Event();
      } else {
        // $(".comments-more").css("pointer-events", "auto");
        // $(".comments-list").hide();
      }
    }
  );
};

$(".comments-list").show();
getCommenList_Event(
  { article_id: $(".blog.detail").attr("data-id"), page: 1 },
  "init"
);

// 点击加载更多
$(".comments-more")
  .off("click")
  .on("click", function (e) {
    e.preventDefault();
    $(this).css("pointer-events", "none");
    comment.totalPage = Math.ceil(
      $(".comments-list-title").attr("data-num") / comment._default
    );
    if (comment.page >= comment.totalPage) {
      // console.log("loading fished")
      $(".comments-more").hide();
      return;
    } else {
      comment.page++;
      getCommenList_Event({
        article_id: $(".blog.detail").attr("data-id"),
        page: comment.page,
      });
    }

    // console.log(comment.page)
  });

$(window).scroll(function () {
  if ($("#articleCnt").outerHeight() > 0) {
    // if (($(window).scrollTop() > ($("#articleCnt").outerHeight() - 500)) && $(window).width() > 768) {
    if (
      $(window).scrollTop() > $(".share-like-section").offset().top - 160 &&
      $(window).width() > 768
    ) {
      $(".social-left").addClass("pos-on");
      $(".side-banner,.article-cnt .contents").removeClass("side-on");
    } else {
      $(".social-left").removeClass("pos-on");
      $(".side-banner,.article-cnt .contents").addClass("side-on");
    }
  }
  if (
    $(window).scrollTop() > $(".header-nav.header-main").height() &&
    $(window).width() > 768
  ) {
    $(".article-cnt .contents").css({
      top: "29%",
    });
  } else {
    $(".article-cnt .contents").css({
      top: "22%",
    });
  }
});