let uIdIndex = 0;
function getNextUId(str="section") {
  return `content-${str}-id-${uIdIndex++}`
}

class ContentSections extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: "open"})
    this.shadowRoot.innerHTML = `
      <style>
        [part*="content-tabs"] {
          --hue: 328deg;
          --accent: var(--hue) 100% 54%;
          --indicator-size: 2px;
          --space-1: .5rem;
          --space-2: 1rem;
          --space-3: 1.5rem;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          position:relative
        }
        
        
        [part*="content-tabs"] [part="contents"] {
          block-size: 100%;
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: 100%;
          }
          
        /* all of these need root/host/where */
        nav > a, 
        [part*="content-tabs"] :where(article,section),
        header, 
        nav, 
        [part="contents"] {
            outline-color: hsl(var(--accent));
            outline-offset:-5px
        }

       [part*="content-tabs"] [part="contents"] {
            overflow-x: auto;
            overflow-y: hidden;
            overflow: auto hidden;
            overscroll-behavior-x: contain;
            -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
            margin-top: var( --heading-margin-top, auto);
        }
        

        @media (prefers-reduced-motion: no-preference) {
          .scroll-snap-x slot {
           /* scroll-behavior: smooth; */
          }
        }
        
       
        
        header {
          --text-color: hsl(var(--hue) 5% 40%);
          --text-active-color: hsl(var(--hue) 20% 10%);
          flex-shrink: 0;
          min-block-size: -webkit-fit-content;
          min-block-size: -moz-fit-content;
          min-block-size: fit-content;
          display: flex;
          flex-direction:column
        }
        
        header > nav {
            display:flex
        }

       header a {
            scroll-snap-align: start;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            font-size: .8rem;
            color: var(--text-color);
            font-weight: 700;
            text-decoration: none;
            padding:var(--space-2) var(--space-3)
        }
        
        header a > svg {
            inline-size: 1.5em;
            pointer-events:none
        }
        
        header a:hover {
            background:hsl(var(--accent)/5%)
        }
        
        header a:focus {
            outline-offset:-.5ch
        }
        
        header > .snap-indicator {
            inline-size: 0;
            block-size: var(--indicator-size);
            border-radius: var(--indicator-size);
            background:hsl(var(--accent))
        }
        
        [part*="content-tabs"]  [part="contents"] {
            block-size: 100%;
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns:100%;
        }
        

        [part="contents"] > * {
            scroll-snap-align: start;
            overflow-y: auto;
            overscroll-behavior-y: contain;
            padding:var(--space-2) var(--space-3);
        }
        
        [part="content-tabs"]  h2 {
          color: blue;
        }
        
    header a:active, 
    header a:target, 
    header a[active] {
        color: var(--text-active-color);
        border-block-end-color:hsl(var(--accent))
    }

    .snap-indicator {
        visibility:hidden
    }
}

      </style>
      <div part="container">
        <header class="scroll-snap-x"> 
          <nav part="tablist"></nav>
          <span class="snap-indicator"></span>
        </header>
        <section class="scroll-snap-x" part="contents">
        </section>
      </div>`
    
    let navEl = this.shadowRoot.querySelector('nav');
    let container = this.shadowRoot.querySelector('[part="container"]');
    let sectionContainer = this.shadowRoot.querySelector('[part="contents"]')
    
    let createASection = (h) => {
      let currentSectionContents = document.createElement('section')
      let currentSlotId = getNextUId("slot")
      currentSectionContents.id = getNextUId()
      currentSectionContents.innerHTML = `<slot name=${currentSlotId}></slot>`
      sectionContainer.appendChild(currentSectionContents)
      let temp = document.createElement('a')
      temp.href = `#${currentSectionContents.id}`
      temp.innerHTML = h.innerText
      navEl.appendChild(temp)

      // TODO: fix this, for now I am replicating into the light DOM 
      //       so that this makes some kind of sense, but idk..
      h.id = currentSectionContents.id 
      return currentSlotId
    }
    
    let currentSlotId 
    Array.from(this.children).forEach(node => {
      if (/^(H1|H2|H3|H4|H5|H6])$/.test(node.tagName)) {
        currentSlotId = createASection(node)
      } 
      node.slot = currentSlotId
    });
    
    let options = {
      root: container, // this,
      rootMargin: '0px',
      threshold: 0.9
    }

    let observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        let associated = this.shadowRoot.querySelector(`[href="#${entry.target.id}"]`)
        if (entry.isIntersecting) {
            console.log("intersecting", entry, associated)
            associated.part = 'selected'
        }
        else {
          associated.part = "";
        }
      })
    }, options);

    let sections = this.shadowRoot.querySelectorAll('[part="contents"]>section')

    Array.from(sections).forEach((sec, i) => {
      observer.observe(sec)
    })
    
    
    let oldCSSValue = '';
    let newCSSValue = '';
    let hostComputedStyle = getComputedStyle(this);
    let frameA = () => {
      requestAnimationFrame(frameB);
      newCSSValue = hostComputedStyle.getPropertyValue('--affordance');
    };
    let frameB = () => {
      requestAnimationFrame(frameA);
      if (oldCSSValue !== newCSSValue) {
  oldCSSValue = newCSSValue;
console.log('got ', newCSSValue)
        if (newCSSValue.trim() !== 'content-tabs') {
          //TODO: figure out how we can not use a class here
          container.part = "container"
          //this.classList.remove('content-tabs')
        } else {
          container.part = 'container content-tabs'
          //this.classList.add('content-tabs')
        }
      }
    };
    // initialize
    // -------------------------------------------------------------------------
    // activate the CSS --affordance property observer
    frameA();
  }
}

customElements.define("oui-panelset", ContentSections)

let defaultUA = document.createElement('style')
defaultUA.innerText = `
snap-tabs > * > h2 { color: blue; }
`
document.head.appendChild(defaultUA)