<script>
  volantis.layoutHelper("comments",`<div id="twikoo_container"><i class="fas fa-cog fa-spin fa-fw fa-2x"></i></div>`);
  volantis.layoutHelper("comments",`<div id="beaudar_container" class="content-in" style="display: none;"></div>`);
  function load_twikoo() {
    if(!document.querySelectorAll("#twikoo_container")[0])return;
    volantis.js("<%- theme.comments.twikoo.js || 'https://cdn.jsdelivr.net/npm/twikoo@latest' %>", pjax_twikoo)
  }
  function pjax_twikoo() {
    if(!document.querySelectorAll("#twikoo_container")[0])return;
    let path = pdata.commentPath;
    let placeholder = pdata.commentPlaceholder || "<%= theme.comments.twikoo.placeholder %>" || "";
    if (path.length == 0) {
      let defaultPath = '<%= theme.comments.twikoo.path %>';
      path = defaultPath || "decodeURI(window.location.pathname)"; //神奇的pathname
    }
    twikoo.init(Object.assign(Object.assign(<%- JSON.stringify(theme.comments.twikoo) %>, {
      el: '#twikoo_container',
      path: path,
      placeholder: placeholder,
      onCommentLoaded: function() {
        if(typeof volantisFancyBox === "undefined") {
          const checkFancyBox = setInterval(() => {
            if(typeof volantisFancyBox === "undefined") return;
            clearInterval(checkFancyBox);
            volantisFancyBox.reloadFancyBox('.tk-content img:not([class*="emo"])', 'Comments');
          })
        } else {
          volantisFancyBox.reloadFancyBox('.tk-content img:not([class*="emo"])', 'Comments');
        }
      }
    }),pdata.commentConfig)).then(function () {
      volantis.selectComment = volantis.selectComment === undefined ? 'beaudar' : volantis.selectComment;
      if(volantis.selectComment === 'beaudar') {
        document.getElementById('twikoo').style.display = 'none';
        document.getElementById('beaudar_container').style.display = 'block';
      } else {
        document.getElementById('twikoo').style.display = 'block';
        document.getElementById('beaudar_container').style.display = 'none';
      }
    })
  }
  load_twikoo();
  volantis.pjax.push(()=>{
    if (typeof twikoo == "undefined") {
      load_twikoo();
    } else {
      pjax_twikoo();
    }
  },'twikoo');
</script>


<script>
  volantis.beaudar = {};

  function check_beaudar() {
    if (volantis.dark.mode === "dark") {
      volantis.beaudar.Theme = '<%- theme.comments.beaudar.theme.dark %>';
    } else {
      volantis.beaudar.Theme = '<%- theme.comments.beaudar.theme.light %>';
    }

    return document.getElementById("beaudar_container");
  }

  function pjax_beaudar() {
    const HEAD = check_beaudar();
    if (!HEAD) return;

    const script = document.createElement('script');
    let issuenumber = "<%- theme.comments.beaudar['issue-number'] %>";
    if (issuenumber) {
      script.setAttribute('issue-number', issuenumber);
    } else {
      script.setAttribute('issue-term', "<%- theme.comments.beaudar['issue-term'] %>");
    }
    script.setAttribute('src', 'https://beaudar.lipk.org/client.js');
    script.setAttribute('repo', '<%- theme.comments.beaudar.repo %>');
    script.setAttribute('input-position', '<%- theme.comments.beaudar.position %>');
    script.setAttribute('crossorigin', '<%- theme.comments.beaudar.crossorigin %>');
    script.setAttribute('branch', '<%- theme.comments.beaudar.branch %>');
    script.setAttribute('comment-order', '<%- theme.comments.beaudar.order %>');
    script.setAttribute('label', '<%- theme.comments.beaudar.label %>');
    script.setAttribute('theme', volantis.beaudar.Theme);
    HEAD.appendChild(script);
  }

  function dark_beaudar() {
    const HEAD = check_beaudar();
    if (!HEAD) return;

    const message = {
      type: 'set-theme',
      theme: volantis.beaudar.Theme
    };
    const beaudarIframe = document.querySelector('iframe');
    beaudarIframe.contentWindow.postMessage(message, 'https://beaudar.lipk.org');
  }

  function check_beaudar_style() {
    // Beaudar 会往 HEAD 的首节点追加样式元素，而这个追加没有添加判断
    // 所以 Pjax 下会多次添加样式文件，略微麻烦。
    const checkStyle = document.querySelector('head').firstElementChild;
    if(checkStyle.innerText.includes('beaudar')) checkStyle.remove();
  }

  pjax_beaudar();

  volantis.pjax.push(check_beaudar_style);
  volantis.pjax.push(pjax_beaudar);
  volantis.dark.push(dark_beaudar);
</script>
