/**
 * Toggle visible content
 *
 * TODO Make this a lot better
 */

(function () {

  const toggleContent = document.querySelector('.toggle-content');
  const toggleElem = document.querySelector('.toggle');

  if (!toggleContent && !toggleElem) return;

  // Copy the toggle element and set content to value of
  // data-toggle-alt, then append it to toggleContent
  const toggleElemClone = toggleElem.cloneNode(true);
  toggleElemClone.removeAttribute('aria-controls');
  toggleElemClone.innerHTML = toggleElem.getAttribute('data-toggle-alt');
  const paragraphToggle = document.createElement('p');
  paragraphToggle.appendChild(toggleElemClone);
  toggleContent.appendChild(paragraphToggle);

  toggleContent.setAttribute('aria-hidden', 'true');

  // Toggle element visibility
  const toggle = function (elem) {
    elem.classList.toggle('is-visible');

    // Toggle aria-hidden attribute upon content toggle
    elem.setAttribute(
      'aria-hidden',
      elem.getAttribute('aria-hidden') === 'false'
      ? 'true'
      : 'false'
    );

    // Toggle visibility of toggleElem
    if (toggleElem.hasAttribute('hidden')) {
      toggleElem.removeAttribute('hidden');
    } else {
      toggleElem.setAttribute('hidden', '');
    }
  };

  // Listen for click events
  document.addEventListener('click', function (event) {

    // Make sure clicked element is our toggle
    if (!event.target.classList.contains('toggle')) return;

    // Prevent default link behavior
    event.preventDefault();

    // Get the content
    const content = document.querySelector(event.target.hash);
    if (!content) return;

    // Toggle the content
    toggle(content);

  }, false);
})();