class CTX {
  addPageNumbers() {
    let pages = this.pages
    for (let i = 2; i <= pages.length; i++) {
      let div = document.createElement('div')
      div.classList.add('page-number')
      div.textContent = i
      pages[i - 1].appendChild(div)
    }
  }

  addTableOfContents() {
    let hs = document.querySelectorAll('h1,h2,h3')
    let ol = document.createElement('ol')
    ol.classList.add('table-of-contents')

    let prefix_counter = [0, 0, 0]
    let page_counter = 2
    let page

    for (let h of hs) {
      let level = {
        'H1': 0,
        'H2': 1,
        'H3': 2,
      }[h.tagName]

      prefix_counter[level]++
      for (let i = level + 1; i < prefix_counter.length; i++)
        prefix_counter[i] = 0

      let prefix = ''
      for (let i = 0; i <= level; i++)
        prefix += prefix_counter[i] + '.'

      prefix = prefix.slice(0, prefix.length - 1)
      console.log(h.tagName)

      let li = document.createElement('li')
      let name = document.createElement('span')
      let page_number = document.createElement('span')

      name.innerHTML = prefix + ' - ' + h.innerHTML

      let cur_page = h.closest('section')
      if (page != cur_page) {
        page = cur_page
        page_counter++
      }
      page_number.innerHTML = page_counter

      li.append(name, page_number)
      ol.appendChild(li)
    }

    let header = document.createElement('header')
    header.innerText = 'Содержание'
    this.pages[0].after(document.createElement('section'))
    this.pages[1].appendChild(header)
    this.pages[1].appendChild(ol)
  }

  get pages() {
    return document.getElementsByTagName('section')
  }
}

let ctx = new CTX
ctx.addTableOfContents()
ctx.addPageNumbers()