import { Handler } from '/csspageweaver/lib/paged.esm.js';


export default class itemsDecor extends Handler {
    constructor(chunker, polisher, caller) {
        super(chunker, polisher, caller);
        this.symbol = "=";
      }

    createDecor(symbol, sizes, sizeClass) {
      const div = document.createElement("div");
      div.className = `decor-h3 ${sizeClass}`;
      sizes.forEach(n => {
        const line = document.createElement("div");
        line.textContent = symbol.repeat(n);
        div.appendChild(line);
      });
      return div;
    }

    afterPageLayout(pageElement, page, breakToken) {
      const symbol = this.symbol;
      const isLeft = pageElement.classList.contains("pagedjs_left_page");
      const smallSizes = [1, 2, 3, 2, 1];
      const bigSizes   = [1, 2, 3, 4, 3, 2, 1];

      let subtitles = pageElement.querySelectorAll("h3");
      subtitles.forEach(subtitle => {
        if (!subtitle.querySelector(".h3-before")) {
          const spanBefore = document.createElement("span");
          spanBefore.className = "h3-before";
          spanBefore.textContent = symbol.repeat(3);
          subtitle.insertBefore(spanBefore, subtitle.firstChild);
        }

        let spanAfter = subtitle.querySelector(".h3-after");
        if (!spanAfter) {
          spanAfter = document.createElement("span");
          spanAfter.className = "h3-after";
          subtitle.appendChild(spanAfter);
        }

        spanAfter.textContent = "";
        const baseHeight = subtitle.offsetHeight;
        let count = 0;
        // Pour compléter la ligne: ajoute le symbole dans le span en vérifiant la hauteur du titre, si l'ajout d'un symbole augmente la hauteur du titre, alors on enleve un symbole
        while (count < 300) {
          count++;
          spanAfter.textContent = symbol.repeat(count);
          if (subtitle.offsetHeight > baseHeight) {
            spanAfter.textContent = symbol.repeat(count - 1);
            break;
          }
        }

        const firstDecor  = this.createDecor(symbol, isLeft ? smallSizes : bigSizes,   isLeft ? "decor-h3_small" : "decor-h3_big");
        const secondDecor = this.createDecor(symbol, isLeft ? bigSizes   : smallSizes, isLeft ? "decor-h3_big"   : "decor-h3_small");
        subtitle.parentNode.insertBefore(firstDecor, subtitle);
        subtitle.parentNode.insertBefore(secondDecor, subtitle.nextSibling);
      });
    }
}