import { r as registerInstance, h } from './index-5568e3fa.js';

const tableOfContentsCss = "sparkle-table-of-contents{display:block;font-size:13px;margin-bottom:2rem}sparkle-table-of-contents .Nav-header{color:var(--text-color--lighter);font-size:0.75em;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding-left:0}sparkle-table-of-contents ul{padding:0;list-style:none;line-height:1.23em}sparkle-table-of-contents .Nav-link{padding-left:0;margin-left:0}sparkle-table-of-contents a{color:inherit;display:inline-block;transition:.2s color, .3s transform ease-out}sparkle-table-of-contents .Nav-link.selected a{color:var(--accent-color);transform:translateX(2px)}";

const SparkleTableOfContents = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.links = [];
    this.label = 'Contents';
    this.basepath = '';
    this.itemOffsets = [];
    this.selectedId = null;
    this.pageWidth = document.body.offsetWidth;
    this.toItem = ({ text, href }) => {
      return (h("li", null, h("stencil-route-link", { url: `${this.basepath}${href}`, class: `Nav-link ${this.selectedId === href ? 'selected' : ''}` }, text)));
    };
  }
  function() {
    if (this.pageWidth < 1234) {
      return;
    }
    requestAnimationFrame(() => {
      const itemIndex = this.itemOffsets.findIndex(item => item.topOffset > window.scrollY);
      if (itemIndex === 0 ||
        // tslint:disable-next-line
        this.itemOffsets[this.itemOffsets.length - 1] === undefined) {
        this.selectedId = null;
      }
      else if (itemIndex === -1) {
        this.selectedId = this.itemOffsets[this.itemOffsets.length - 1].id;
      }
      else {
        this.selectedId = this.itemOffsets[itemIndex - 1].id;
      }
    });
  }
  updateItemOffsets() {
    requestAnimationFrame(() => {
      this.pageWidth = document.body.offsetWidth;
      this.itemOffsets = this.links.map(link => {
        const item = document.getElementById(link.href.substring(1));
        return {
          id: link.href,
          topOffset: item.getBoundingClientRect().top + window.scrollY
        };
      });
    });
  }
  componentDidLoad() {
    this.updateItemOffsets();
  }
  render() {
    if (this.links.length < 1) {
      return null;
    }
    return [
      h("strong", { class: "Nav-header" }, this.label),
      h("nav", null, h("ul", { class: "Nav-subnav" }, this.links.map(this.toItem)))
    ];
  }
  static get watchers() { return {
    "links": ["updateItemOffsets"]
  }; }
};
SparkleTableOfContents.style = tableOfContentsCss;

export { SparkleTableOfContents as sparkle_table_of_contents };
