import { h, Component, Prop } from '@stencil/core';
import { slugify } from '../../web/utils/slugify';
import { IntersectionHelper } from '../../core';
export class ResourceTOC {
    constructor() {
        this.headings = new Map();
    }
    componentDidLoad() {
        IntersectionHelper.addListener(({ entries }) => {
            entries.forEach(({ target, intersectionRatio }) => {
                if (!this.headings.get(target.id))
                    return;
                const heading = this.headings.get(target.id);
                if (intersectionRatio === 0) {
                    heading.inView = false;
                }
                else {
                    heading.inView = true;
                }
            });
            this.getFirstInView();
        });
        this.titleNames.map((title) => {
            const id = `h-${slugify(title)}`;
            const item = document.getElementById(id);
            this.headings.set(id, Object.assign(Object.assign({}, this.headings.get(id)), { headingEl: item }));
        });
    }
    getFirstInView() {
        let gotFirst = false;
        for (const val of this.headings.values()) {
            if (!val.tocEl)
                continue;
            if (val.inView && !gotFirst) {
                val.tocEl.classList.add('active');
                gotFirst = true;
            }
            else {
                val.tocEl.classList.remove('active');
            }
        }
        if (!gotFirst) {
            const { tocEl } = [...this.headings.values()].reduce((acc, cur, i) => {
                var _a, _b;
                const curTop = (_a = cur.headingEl) === null || _a === void 0 ? void 0 : _a.offsetTop;
                const accTop = (_b = acc.headingEl) === null || _b === void 0 ? void 0 : _b.offsetTop;
                if (i === 0 || !accTop)
                    return cur;
                if (Math.abs(window.scrollY - curTop) < Math.abs(window.scrollY - accTop)) {
                    return cur;
                }
                else {
                    return acc;
                }
            });
            tocEl === null || tocEl === void 0 ? void 0 : tocEl.classList.add('active');
        }
    }
    handleTocClick(ev) {
        var _a;
        const target = ev.target;
        if (!((_a = target === null || target === void 0 ? void 0 : target.dataset) === null || _a === void 0 ? void 0 : _a.id))
            return;
        const headingEl = this.headings.get(target.dataset.id).headingEl;
        window.scrollTo({
            top: headingEl.offsetTop - 100,
            behavior: 'smooth'
        });
    }
    render() {
        return (h("nav", null,
            h("ul", null, this.titleNames.map(link => (h("li", { class: "ui-paragraph-4", onClick: (ev) => this.handleTocClick(ev), "data-id": `h-${slugify(link)}`, ref: e => {
                    var _a;
                    const id = (_a = e === null || e === void 0 ? void 0 : e.dataset) === null || _a === void 0 ? void 0 : _a.id;
                    if (!id || !e)
                        return;
                    this.headings.set(id, Object.assign(Object.assign({}, this.headings.get(id)), { tocEl: e }));
                } }, link))))));
    }
    static get is() { return "resource-toc"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["resource-toc.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["resource-toc.css"]
    }; }
    static get properties() { return {
        "titleNames": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "string[]",
                "resolved": "string[]",
                "references": {}
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
}
