'use strict';

// Listens for clicks on the mobile menu toggle and the main menu close toggle.
window.addEventListener('click', function(e) {
  if (e.target.matches('#menu-toggle, #menu-toggle i')) {
    openMenu();
  } else if (e.target.matches('#menu-close, #menu-close i')) {
    closeMenu();
  } else if (e.target.matches('[data-action="copy"]')) {
    copyCodeToClipboard(e);
  }
});

function openMenu() {
  const menu = document.getElementById('menu'),
    menuToggle = document.getElementById('menu-toggle'),
    body = document.body;

  menu.classList.toggle('active');
  menu.ariaHidden = false;
  menuToggle.ariaExpanded = true;
  body.style.overflow = 'hidden';
}

function closeMenu() {
  const menu = document.getElementById('menu'),
    menuToggle = document.getElementById('menu-toggle'),
    body = document.body;

  menu.classList.remove('active');
  menu.ariaHidden = true;
  menuToggle.ariaExpanded = false;
  body.style.overflow = 'auto';
}

function copyCodeToClipboard(e) {
  const codeTag = e.target.closest('.highlight').querySelector("code");

  if (!codeTag) return;
  
  const tw = document.createTreeWalker(
    codeTag,
    NodeFilter.SHOW_TEXT,
    (node) => {
      if (node.parentElement.matches(".ln")) {
        return NodeFilter.FILTER_REJECT;
      }

      return NodeFilter.FILTER_ACCEPT;
    },
  );

  let acc = "";
  while (tw.nextNode()) {
    acc += tw.currentNode.textContent;
  }

  navigator.clipboard.writeText(acc)
    .then(() => {
      e.target.classList.add('copied');

      setTimeout(() => {
        e.target.classList.remove('copied');
      }, 5000);
    })
    .catch(() => {
      e.target.classList.add('not-copied');
    });
}