const tableOfContents = (settings) => {
  // Helper function that iterates all headings and returns the highest level.
  // For example, if array of  h2, h3 and h4 is passed, the function returns 2.
  const getHighestHIndex = headings => {
    let indexes = Array.from(headings).map(item => {
      return parseInt(item.tagName.replace('H', ''));
    });
    return indexes.reduce((a, b) => { 
      return Math.min(a, b);
    });
  };

  // Iterates passed headings, gets their inner HTML and transforms it into id
  const createAnchors = (settings) => {
    let headings = document.querySelectorAll(settings.headingsSelector);
    headings.forEach(item => {
      let anchorName = item.innerHTML.toLowerCase().replace(/(<([^>]+)>)/ig,'').replace(/\W/g,'-');
      item.setAttribute('id', anchorName);
    });
  };

  // Iterates passed headings and creates unordered list with anchor links reflecting heading levels
  const createTableOfContents = (settings) => {
    let headings = document.querySelectorAll(settings.headingsSelector);
    let tableOfContentsWrapper = document.querySelector(settings.wrapperSelector);
    let tableOfContents = '';
    let prevHeadingLevel = getHighestHIndex(headings);
    headings.forEach(item => {
      let headingLevel = parseInt(item.tagName.replace('H', ''));
      if (prevHeadingLevel > headingLevel) {
        tableOfContents += '</ul>';
      }
      if (prevHeadingLevel < headingLevel) {
        tableOfContents += '<ul>';
      }
      tableOfContents += `<li><a href="#${item.getAttribute('id')}">${item.innerHTML}</a></li>`;
      prevHeadingLevel = headingLevel;
    });
    tableOfContentsWrapper.innerHTML = tableOfContents;
  };
  
  createAnchors(settings);
  createTableOfContents(settings);
};

// Init table of contents
tableOfContents({
  headingsSelector: 'h2:not(.do-not-render), h3, h4',
  wrapperSelector: '.table-of-contents'
});