const LayerOrder = function() {
    const layerIDs = [];
    let mom= false;
    let updateDom = (from, to) => {
        const layerID = layerIDs[from];
        const domLayerSelector = `.layerMover${layerID}`;
        const domLayer = tp.shadowRoot.querySelector(domLayerSelector);
        const otherLayerID = layerIDs[to];
        const otherDomLayerSelector = `.layerMover${otherLayerID}`;
        const otherDomLayer = tp.shadowRoot.querySelector(otherDomLayerSelector);
        if (domLayer === null || otherDomLayer == null) {
            return false;
        }
        if (mom === false) {
            mom = domLayer.parentNode;
        }
        if (mom !== otherDomLayer.parentNode) {
            return false;
        }
        if (from > to) {
            mom.insertBefore(domLayer, otherDomLayer);
        } else {
            mom.insertBefore(otherDomLayer, domLayer);
        }
        return true;
    };
    const updateOf = () => {
        const layers = JSON.parse(JSON.stringify(layerIDs));
        layers.reverse();
        const v = new Module.vector$string$();
        for (let i = 0; i < layers.length; i++) {
            v.push_back(layers[i]);
        }
        Module.setLayerOrder(v);
    };
    this.add = (id) => {
        layerIDs.push(id);
        updateOf();
    };
    this.remove = (id) => {
        const i = layerIDs.indexOf(id);
        layerIDs.splice(i, 1);
        updateOf();
    };
    this.move = (from, to) => {
        if (updateDom(from, to)) {
            // remove `from` item and store it
            var l = layerIDs.splice(from, 1)[0];
            // insert stored item into position `to`
            layerIDs.splice(to, 0, l);
            updateOf();
        } else {
            console.error('js::LayerOrder::move failed');
        }
    };
    this.moveDown = (id) => {
        let i = layerIDs.indexOf(id);
        const nextI = i + 1;
        if (nextI >= layerIDs.length) {
            console.log('LayerOrder::moveDown', 'cannot move further down');
        } else {
            this.move(i, nextI);
        }
    };
    this.moveUp = (id) => {
        let i = layerIDs.indexOf(id);
        const nextI = i - 1;
        if (nextI < 0) {
            console.log('LayerOrder::moveUp', 'cannot move further up');
        } else {
            this.move(i, nextI);
        }
    };
    this.get = () => {
        return layerIDs;
    };
    this.set = (newLayerIDs) => {
        window.newLayerIDs = newLayerIDs;
        window.layerIDs = layerIDs;
        newLayerIDs.forEach((id, to_i) => {
            //console.log(`id: ${id}, to_i: ${to_i}, layerIDs[0]: ${layerIDs[0]}`);
            const from_i = layerIDs.indexOf(id);
            //console.log({id, from_i, to_i});
            this.move(from_i, to_i);
        });
    };
};

export {
    LayerOrder
};