import LeaderLine from "leader-line-new";

class CustomTimeline extends HTMLElement {
    _eventElements: Element[];

    constructor() {
        super();
        this._eventElements = this._getNodeElements();

        window.addEventListener("load", this._paintLeaderLines);

    }

    _getNodeElements = (): Element[] =>
        Array.from(this.querySelectorAll('[data-timeline-node-index]')).sort(
            (elementA, elementB) =>
                Number(elementA.getAttribute('data-timeline-node-index')) - Number(elementB.getAttribute('data-timeline-node-index'))
        );


    _paintLeaderLines = () => {
        let pairs = this._eventElements.map((entry, index) => {
            if (index < this._eventElements.length - 1) {
                return [entry, this._eventElements[index + 1]];
            }
        }).filter(pair => pair !== undefined)

        let contentBodyScrolling = document.getElementById("content-body-scrolling");
        let wrapper = this.querySelector("[data-custom-timeline-line-wrapper]") as HTMLElement;

        const position = (line: LeaderLine) => {
            wrapper.style.transform = "none";
            let rectWrapper = wrapper.getBoundingClientRect();

            wrapper.style.transform = "translate(-" +
                (Number(rectWrapper.left)) + "px, -"
                +
                (Number(rectWrapper.top)) + "px)"

            console.log(wrapper.style.transform)
            line.position()

        }

        pairs.forEach(pair => {
            let line = new LeaderLine({
                start: pair[0],
                end: pair[1],
                color: '#10ac25',
                size: 3,
                startSocket: "right",
                endSocket: "left",
                startPlug: "square",
                endPlug: "arrow3"
            });

            // Find new element by hidden id and add to wrapper div
            const newLineEl = document.querySelector(`body .leader-line:has(path#leader-line-${line._id}-line-path)`);
            if (newLineEl) wrapper.appendChild(newLineEl);

            // Add position updaters for scrolling and resize events
            contentBodyScrolling?.addEventListener("scroll", () => position(line));
            window.addEventListener("resize", () => position(line));

            // Perform the initial positioning
            position(line);
        });

    }
}

customElements.define('custom-timeline', CustomTimeline)