"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.YfmTableDnDGhost = void 0;
class YfmTableDnDGhost {
    _x;
    _y;
    _dndBackgroundElem;
    _ghostTable;
    _ghostButton = null;
    _tblShiftX;
    _tblShiftY;
    _btnShiftX = 0;
    _btnShiftY = 0;
    _rafId;
    constructor(view, params) {
        this._x = params.initial.clientX;
        this._y = params.initial.clientY;
        const document = view.dom.ownerDocument;
        this._dndBackgroundElem = document.createElement('div');
        this._dndBackgroundElem.classList.add('g-md-yfm-table-dnd-cursor-background');
        {
            const res = this._buildGhostButton(params);
            if (res) {
                this._ghostButton = res.domElement;
                this._btnShiftX = res.shiftX;
                this._btnShiftY = res.shiftY;
                this._dndBackgroundElem.appendChild(this._ghostButton);
            }
        }
        {
            const { domElement, shiftX, shiftY } = params.type === 'row'
                ? this._buildRowGhost(view, params)
                : this._buildColumnGhost(view, params);
            this._ghostTable = domElement;
            this._tblShiftX = shiftX;
            this._tblShiftY = shiftY;
            this._dndBackgroundElem.appendChild(this._ghostTable);
        }
        this._updatePositions();
        this._rafId = requestAnimationFrame(() => {
            document.body.append(this._dndBackgroundElem);
            this._startAnimation();
        });
    }
    move(event) {
        this._x = event.clientX;
        this._y = event.clientY;
    }
    destroy() {
        cancelAnimationFrame(this._rafId);
        this._dndBackgroundElem.remove();
    }
    _startAnimation() {
        const self = this;
        let last = { x: self._x, y: self._y };
        self._rafId = requestAnimationFrame(function update() {
            if (self._x !== last.x || self._y !== last.y) {
                last = { x: self._x, y: self._y };
                self._updatePositions();
            }
            self._rafId = requestAnimationFrame(update);
        });
    }
    _updatePositions() {
        {
            const tx = this._x + this._tblShiftX;
            const ty = this._y + this._tblShiftY;
            this._ghostTable.style.transform = `translate(${tx}px, ${ty}px)`;
        }
        if (this._ghostButton) {
            const tx = this._x + this._btnShiftX;
            const ty = this._y + this._btnShiftY;
            this._ghostButton.style.transform = `translate(${tx}px, ${ty}px)`;
        }
    }
    _buildRowGhost(view, { tableDesc, rangeIdx }) {
        let shiftX = 0;
        let shiftY = 0;
        const document = view.dom.ownerDocument;
        const container = this._buildGhostContainer(view);
        const table = container.appendChild(document.createElement('table'));
        const tbody = table.appendChild(document.createElement('tbody'));
        {
            const tablePos = tableDesc.pos;
            const tableNode = view.domAtPos(tablePos + 1).node;
            const rect = tableNode.getBoundingClientRect();
            table.style.width = rect.width + 'px';
        }
        const range = tableDesc.base.getRowRanges()[rangeIdx];
        for (let rowIdx = range.startIdx; rowIdx <= range.endIdx; rowIdx++) {
            const tr = tbody.appendChild(document.createElement('tr'));
            for (let colIdx = 0; colIdx < tableDesc.cols; colIdx++) {
                const cellPos = tableDesc.getPosForCell(rowIdx, colIdx);
                if (cellPos.type === 'real') {
                    const origNode = view.domAtPos(cellPos.from + 1).node;
                    const cloned = tr.appendChild(origNode.cloneNode(true));
                    const rect = origNode.getBoundingClientRect();
                    cloned.style.width = rect.width + 'px';
                    cloned.style.height = rect.height + 'px';
                    if (rowIdx === range.startIdx && colIdx === 0) {
                        shiftX = rect.left - this._x;
                        shiftY = rect.top - this._y;
                    }
                }
            }
        }
        removeIdAttributes(table);
        return { domElement: container, shiftX, shiftY };
    }
    _buildColumnGhost(view, { tableDesc, rangeIdx }) {
        let shiftX = 0;
        let shiftY = 0;
        const document = view.dom.ownerDocument;
        const container = this._buildGhostContainer(view);
        {
            const tablePos = tableDesc.pos;
            const table = view.domAtPos(tablePos + 1).node;
            const rect = table.getBoundingClientRect();
            container.style.height = rect.height + 'px';
        }
        const table = container.appendChild(document.createElement('table'));
        const tbody = table.appendChild(document.createElement('tbody'));
        const range = tableDesc.base.getColumnRanges()[rangeIdx];
        for (let rowIdx = 0; rowIdx < tableDesc.rows; rowIdx++) {
            const tr = tbody.appendChild(document.createElement('tr'));
            for (let colIdx = range.startIdx; colIdx <= range.endIdx; colIdx++) {
                const cellPos = tableDesc.getPosForCell(rowIdx, colIdx);
                if (cellPos.type === 'real') {
                    const origNode = view.domAtPos(cellPos.from + 1).node;
                    const cloned = tr.appendChild(origNode.cloneNode(true));
                    const rect = origNode.getBoundingClientRect();
                    cloned.style.width = rect.width + 'px';
                    cloned.style.height = rect.height + 'px';
                    if (rowIdx === 0 && colIdx === range.startIdx) {
                        container.style.minWidth = rect.width + 'px';
                        shiftX = rect.left - this._x;
                        shiftY = rect.top - this._y;
                    }
                }
            }
        }
        removeIdAttributes(table);
        return { domElement: container, shiftX, shiftY };
    }
    _buildGhostButton({ initial: { target }, }) {
        if (!(target instanceof Element))
            return null;
        const button = target.closest('.g-button');
        if (!button)
            return null;
        const container = button.ownerDocument.createElement('div');
        container.classList.add('g-md-yfm-table-dnd-ghost-button');
        const rect = button.getBoundingClientRect();
        const cloned = container.appendChild(button.cloneNode(true));
        removeIdAttributes(cloned);
        cloned.style.cursor = '';
        cloned.style.pointerEvents = 'none';
        return {
            domElement: container,
            shiftX: rect.left - this._x,
            shiftY: rect.top - this._y,
        };
    }
    _buildGhostContainer(view) {
        const container = view.dom.ownerDocument.createElement('div');
        container.setAttribute('aria-hidden', 'true');
        const yfmClasses = Array.from(view.dom.classList).filter((val) => val.startsWith('yfm_'));
        container.classList.add('g-md-yfm-table-dnd-ghost', 'yfm', ...yfmClasses);
        return container;
    }
}
exports.YfmTableDnDGhost = YfmTableDnDGhost;
function removeIdAttributes(elem) {
    elem.removeAttribute('id');
    elem.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'));
}
//# sourceMappingURL=dnd-ghost.js.map
