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)

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

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