YUI().use('node', function (Y) {

  // Get out if we're in the editor
  if (window.Y.Squarespace.Utils.isInDamaskFrame()) {
    window.addEventListener('DOMContentLoaded', () => {
      document.querySelector('#siteWrapper').style.display = 'block';
    });
    return;
  }

  const redirects = async (url) => {
    const response = await fetch(`https://lenekobbernagel.com/${url}`, {
      cache: 'no-cache'
    });
    return response;
  };

  const getNavigation = () => {
    return Array.from(document.querySelectorAll('#mainNavigation .folder')).map(folderElement => {
      let folderToggleElement = folderElement.querySelector('.folder-toggle');
      let subNavLinkElements = Array.from(folderElement.querySelectorAll('.subnav .collection a'));
      return {
        toggle: {
          title: folderToggleElement.innerText,
          link: folderToggleElement.getAttribute('data-href')
        },
        list: subNavLinkElements.map(linkElement => {
          return {
            title: linkElement.innerText,
            link: linkElement.getAttribute('href')
          }
        })
      }
    });
  };

  const getCurrentFolder = (nav) => {
    const url = document.location.pathname;
    let retVal = null;
    nav.forEach(folder => {
      folder.list.forEach(link => {
        if (link.link === url) {
          link.current = true;
          retVal = folder;
        }
      });
    })
    return retVal;
  }

  const doScroll = () => {
    return document.location.hash === "#!";
  };

  const scrollToSecondary = () => {
    // window.scrollTop = document.getElementById('nav-the-second').
  };

  const htmlToElement = (html) => {
    let template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
  };

  // GENERATE SECONDARY NAVIGATION AND PLACEHOLDER

  const switchSecondaryPage = (link) => {
    const allPages = Array.from(document.querySelectorAll('#secondary-content .secondary-content-page'));
    const allTabs = Array.from(document.querySelectorAll('#secondary-nav-container .secondary-nav-tab'));
    allPages.forEach(page => {
      page.classList.remove('active');
      if (page.getAttribute('data-url') === link) {
        page.classList.add('active');
      }
    });
    allTabs.forEach(tab => {
      tab.classList.remove('active');
      if (tab.getAttribute('data-url') === link) {
        tab.classList.add('active');
      }
    });
  };

  const createSecondaryContent = (folder, element) => {
    return new Promise((resolve, reject) => {
      const promises = [];
      folder.list.slice(1).forEach((link, index) => {
        let isCurrent = link.current || (index === 0 && folder.list[0].current);
        let content = htmlToElement(`<div class="secondary-content-page${isCurrent ? ' active' : ''}"></div>`);
        promises.push(fetch(link.link+'?format=json')
          .then((response) => response.json())
          .then((data) => {
            content.innerHTML = data.mainContent;
            content.setAttribute('data-url', link.link);
            element.appendChild(content);
          })
        );
        Promise.all(promises).then(resolve);
      });
    });
  }

  const activateElements = (elm) => {
    window.requestAnimationFrame(() => {
      let v = elm.querySelectorAll('.sqs-video-wrapper');
      v = Array.from(v);
      v.forEach((e, i) => {
        if (e.hasAttribute('data-html')) {
          e.innerHTML = e.getAttribute('data-html');
        }
      });
      let g = elm.querySelectorAll('.image-block-outer-wrapper .thumb-image');
      g = Array.from(g);
      g.forEach((e, i) => {
        if (e.hasAttribute('data-src')) {
          e.src = e.getAttribute('data-src');
        }
      });
      let o = elm.querySelectorAll('.overlay');
      o = Array.from(o);
      o.forEach((e, i) => {
        e.addEventListener('click', brickClickHandler.bind(this, e.getAttribute('data-id')));
      });
    });
  };

  const createSecondaryNav = (folder, element) => {
    folder.list.slice(1).forEach((link, index) => {
      const url = document.location.pathname;
      const active = (url === link.link) || (index === 0 && folder.list[0].link === url);
      const btn = htmlToElement(`<div class="secondary-nav-tab${active ? ' active' : ''}" data-url="${link.link}"><span lang="en-US">${link.title}</span></div>`);
      btn.addEventListener('click', () => {
        switchSecondaryPage(link.link);
      });
      element.appendChild(btn);
    });
  };

  const createSecondaryMain = (folder) => {
    const template = `` +
      `<div class="secondary-main">` +
      `  <div class="secondary-nav-container" id="secondary-nav-container"><div class="secondary-nav-background"></div><div class="secondary-nav"></div></div>` +
      `  <div class="secondary-content" id="secondary-content"></div>` +
      `</div>`;
    const secondaryMain = htmlToElement(template);
    createSecondaryNav(folder, secondaryMain.querySelector('.secondary-nav'));
    createSecondaryContent(folder, secondaryMain.querySelector('.secondary-content')).then(activateElements.bind(this, secondaryMain));
    return secondaryMain;
  };

  // GENERATE NEW NAVIGATION

  const createCategoryElement = (toggle) => {
    const template = `<div class="category"><a href="${toggle.link}">${toggle.title}</a></div>`;
    return htmlToElement(template);
  };

  const createLinkElement = (link) => {
    const template = `<div class="link"><a href="${link.link}#!">${link.title}</a></div>`;
    return htmlToElement(template);
  };

  const createFolderElement = (folder) => {
    const folderElement = htmlToElement(`<div class="folder"></div>`);
    folderElement.appendChild(createCategoryElement(folder.toggle));
    folder.list.slice(1).forEach(link => {
      folderElement.appendChild(createLinkElement(link));
    });
    return folderElement;
  };

  const createFoldersElement = (folders) => {
    const foldersElement = htmlToElement(`<div class="folders"></div>`);
    const folderElements = folders.forEach(folder => {
      foldersElement.appendChild(createFolderElement(folder));
    });
    return foldersElement;
  };

  const createNavigationButtonElement = () => {
    const btn = htmlToElement(`` +
      `<div class="lk-navigation-button">` +
      `  <svg class="menu-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">` +
      `    <path d="M2,8h24c1.1,0,2-0.9,2-2s-0.9-2-2-2H2C0.9,4,0,4.9,0,6S0.9,8,2,8z M26,12H2c-1.1,0-2,0.9-2,2s0.9,2,2,2h24c1.1,0,2-0.9,2-2S27.1,12,26,12z M26,20H2c-1.1,0-2,0.9-2,2s0.9,2,2,2h24c1.1,0,2-0.9,2-2S27.1,20,26,20z"/>` +
      `  </svg>` +
      `  <svg class="close-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">` +
      `    <path d="M4.1,6.9l17,17c0.8,0.8,2,0.8,2.8,0c0.8-0.8,0.8-2,0-2.8l-17-17c-0.8-0.8-2-0.8-2.8,0S3.3,6.1,4.1,6.9z"/>` +
      `    <path d="M21.1,4.1l-17,17c-0.8,0.8-0.8,2,0,2.8c0.8,0.8,2,0.8,2.8,0l17-17c0.8-0.8,0.8-2,0-2.8S21.9,3.3,21.1,4.1z"/>` +
      `  </svg>` +
      `</div>`
    );
    let expanded = false;
    btn.addEventListener('click', (e) => {
      const navElement = document.querySelector('.lk-navigation');
      if (expanded) {
        btn.classList.remove('close');
        navElement.classList.add('lk-navigation-hidden');
      } else {
        btn.classList.add('close');
        navElement.classList.remove('lk-navigation-hidden');
      }
      expanded = !expanded;
    });
    return btn;
  };

  const createNavigationElement = (folders) => {
    const navigationElement = htmlToElement(`<div class="lk-navigation lk-navigation-hidden"></div>`);
    const foldersElement = createFoldersElement(folders);
    navigationElement.appendChild(foldersElement);
    return navigationElement;
  };

  const getTopContent = async (link, element) => {
    const response = await fetch(link.link + '?format=json', {
      cache: 'no-cache'
    });
    const json = await response.json();
    const mainContent = json.mainContent;
    const mainContentElement = element.querySelector('.main-content');
    mainContentElement.innerHTML = mainContent;
    activateElements(mainContentElement);
  };

  // MAIN

  window.addEventListener('DOMContentLoaded', () => {

    const main = document.querySelector('main#page');
    const siteWrapper = document.querySelector('#siteWrapper');
    let nav = getNavigation();
    let navElement = createNavigationElement(nav);
    let navBtnElement = createNavigationButtonElement();

    let currentFolder = null;
    if (location.pathname !== '/' && location.pathname !== '/home') {
      currentFolder = getCurrentFolder(nav);
      getTopContent(currentFolder.list[0], main).then(() => {
        siteWrapper.style.display = 'block';
        setTimeout(() => {
          document.getElementById('lk-load-screen').remove();
        }, 1000);
      });
    } else {
      siteWrapper.style.display = 'block';
      setTimeout(() => {
        document.getElementById('lk-load-screen').remove();
      }, 1000);
    }

    Array.from(document.querySelectorAll('.mobile-nav-toggle')).forEach(e => e.remove());
    document.querySelector('#headerNav').remove();
    document.querySelector('#logoWrapper').parentElement.parentElement.appendChild(navBtnElement);
    document.querySelector('#logoWrapper').parentElement.appendChild(navElement);

    if (location.pathname !== '/' && location.pathname !== '/home') {
      let secondaryMain = createSecondaryMain(currentFolder);
      main.appendChild(secondaryMain);
      setTimeout(() => {
        if (location.hash.indexOf('#!') !== -1) {
          document.getElementById('secondary-content').scrollIntoView();
        }
      }, 1500);
    }

    setTimeout(activateElements.bind(this, main), 1000);

  });

});