/* clipboard plugin */
NexT.plugins.others.clipboard = function () {
  if (!NexT.CONFIG.copybtn) return;

  const clipboard_js = NexT.utils.getCDNResource(NexT.CONFIG.page.clipboard.js);
  NexT.utils.getScript(clipboard_js, function () {

    let chromaDiv = document.querySelectorAll('div.highlight div.chroma');
    if (chromaDiv.length === 0) return;

    chromaDiv.forEach(element => {
      // Add copy button DOM.
      let codeblock = element.querySelector('code[class]:not([class=""]');
      let lang = codeblock.className;
      let copyBtn = document.createElement('div');
      copyBtn.classList.add('copy-btn');
      codeblock.parentNode  .appendChild(copyBtn);

      element.addEventListener('mouseleave', () => {
        setTimeout(() => {
          copyBtn.classList.remove('copied');
          copyBtn.classList.remove('copieduncopied');
        }, 300);
      });

      // Add code header show
      var ch = document.createElement('div');
      ch.classList.add('code-header');
      ch.classList.add(lang);
      ch.insertAdjacentHTML('afterbegin', 
        '<span class="code-lang"></span><span class="collapse-btn"></span>');
      ch.addEventListener('click', function () {
        element.classList.toggle('hidden-code');
        ch.querySelector('.collapse-btn').classList.toggle('collapse');
      }, false);

      element.parentNode.insertBefore(ch, element);
    });
    
    // Register the clipboard event. 
    var clipboard = new ClipboardJS('.copy-btn', {
      text: function (trigger) {
        // TODO: Why there clipboard default text content with enter?
        return trigger.previousElementSibling.textContent.trim();
      }
    });

    clipboard.on('success', function (e) {
      e.clearSelection();
      e.trigger.classList.add('copied');
    });

    clipboard.on('error', function (e) {
      console.error('Copy failed:', e);      
      e.trigger.classList.add('uncopied');
    });
  }); 
}