import { createElement } from '@syncfusion/ej2-base';
import { getBlockContentElement, getDataCell, setCursorPosition, toModelRow } from '../../../common/utils/index';
var TableUIManager = /** @class */ (function () {
    function TableUIManager(parent) {
        // State
        this.hoveredRow = null;
        this.hoveredColIndex = null;
        this.isMultiSelecting = false;
        this.parent = parent;
    }
    TableUIManager.prototype.init = function (table, blockElement, blockModel) {
        this.table = table;
        this.blockElement = blockElement;
        this.blockModel = blockModel;
        this.blockId = table.getAttribute('data-block-id');
        this.createUiElements();
        this.mountUiElements();
        this.wireDelegatedMousemove();
        this.wireRowInsert();
        this.wireActionHandles();
        this.wireColInsert();
        this.wireFocusAndCleanup();
        this.wireObservers();
    };
    // 1) Create all UI elements
    TableUIManager.prototype.createUiElements = function () {
        this.rowInsertHandle = createElement('div', { className: 'e-row-insert-handle e-icons e-plus', attrs: { contenteditable: 'false' }, styles: 'display: none' });
        this.rowActionHandle = createElement('div', { className: 'e-row-action-handle e-action-handle', attrs: { contenteditable: 'false', 'data-block-id': this.blockId, 'data-icon-type': 'row' }, styles: 'display: none' });
        var rowActionHandleIcon = createElement('span', { className: 'e-icons e-block-drag-icon' });
        this.rowActionHandle.appendChild(rowActionHandleIcon);
        this.rowHoverLine = createElement('div', { className: 'e-row-hover-line', styles: 'display: none', attrs: { contenteditable: 'false' } });
        this.rowTopDot = createElement('div', { className: 'e-row-dot', styles: 'display:none', attrs: { contenteditable: 'false' } });
        this.rowBottomDot = createElement('div', { className: 'e-row-dot', styles: 'display:none', attrs: { contenteditable: 'false' } });
        this.colInsertHandle = createElement('div', { className: 'e-col-insert-handle e-icons e-plus', attrs: { contenteditable: 'false' }, styles: 'display: none' });
        this.colActionHandle = createElement('div', { className: 'e-col-action-handle e-action-handle', attrs: { contenteditable: 'false', 'data-block-id': this.blockId, 'data-icon-type': 'col' }, styles: 'display: none' });
        var colActionHandleIcon = createElement('span', { className: 'e-icons e-block-drag-icon' });
        colActionHandleIcon.style.transform = 'rotate(90deg)';
        this.colActionHandle.appendChild(colActionHandleIcon);
        this.colHoverLine = createElement('div', { className: 'e-col-hover-line', styles: 'display: none', attrs: { contenteditable: 'false' } });
        this.colLeftDot = createElement('div', { className: 'e-col-dot', styles: 'display:none', attrs: { contenteditable: 'false' } });
        this.colRightDot = createElement('div', { className: 'e-col-dot', styles: 'display:none', attrs: { contenteditable: 'false' } });
        this.rowPinned = createElement('div', { className: 'e-row-action-handle e-pinned e-action-handle', attrs: { contenteditable: 'false', 'data-icon-type': 'row' }, styles: 'display: none' });
        var rowPinnedHandleIcon = createElement('span', { className: 'e-icons e-block-drag-icon' });
        this.rowPinned.appendChild(rowPinnedHandleIcon);
        this.colPinned = createElement('div', { className: 'e-col-action-handle e-pinned e-action-handle', attrs: { contenteditable: 'false', 'data-icon-type': 'col' }, styles: 'display: none' });
        var colPinnedHandleIcon = createElement('span', { className: 'e-icons e-block-drag-icon' });
        colPinnedHandleIcon.style.transform = 'rotate(90deg)';
        this.colPinned.appendChild(colPinnedHandleIcon);
        this.rowTopHit = createElement('div', { className: 'e-row-dot-hit', styles: 'display:none', attrs: { contenteditable: 'false' } });
        this.rowBottomHit = createElement('div', { className: 'e-row-dot-hit', styles: 'display:none', attrs: { contenteditable: 'false' } });
        this.colLeftHit = createElement('div', { className: 'e-col-dot-hit', styles: 'display:none', attrs: { contenteditable: 'false' } });
        this.colRightHit = createElement('div', { className: 'e-col-dot-hit', styles: 'display:none', attrs: { contenteditable: 'false' } });
    };
    // 2) Mount elements to block element in the same order
    TableUIManager.prototype.mountUiElements = function () {
        var _this = this;
        [this.rowInsertHandle, this.rowHoverLine, this.rowActionHandle, this.rowTopDot, this.rowBottomDot, this.colInsertHandle,
            this.colHoverLine, this.colActionHandle, this.colLeftDot, this.colRightDot, this.rowPinned, this.colPinned]
            .forEach(function (el) { return _this.blockElement.appendChild(el); });
        [this.rowTopHit, this.rowBottomHit, this.colLeftHit, this.colRightHit]
            .forEach(function (el) { return _this.blockElement.appendChild(el); });
    };
    // 3) Delegated mouse move handling (exact logic preserved)
    TableUIManager.prototype.wireDelegatedMousemove = function () {
        var _this = this;
        this.table.addEventListener('mousemove', function (e) {
            var target = e.target;
            if (_this.isMultiSelecting || !target.closest('td, th') || target.matches('th.e-row-number')) {
                _this.hideRowUI(_this.rowInsertHandle, _this.rowHoverLine, _this.rowActionHandle, _this.rowTopDot, _this.rowBottomDot);
                _this.hideColUI(_this.colInsertHandle, _this.colHoverLine, _this.colActionHandle, _this.colLeftDot, _this.colRightDot);
                [_this.rowTopHit, _this.rowBottomHit, _this.colLeftHit, _this.colRightHit].forEach(function (el) { return el.style.display = 'none'; });
                return;
            }
            // Row positioning (dots only)
            var row = target.closest('tr');
            _this.hoveredRow = row;
            var rowRect = row.getBoundingClientRect();
            var blockRect = _this.blockElement.getBoundingClientRect();
            _this.rowActionHandle.dataset.rowIndex = Array.from(_this.table.rows).indexOf(row).toString();
            _this.rowActionHandle.style.top = rowRect.top - blockRect.top + 'px';
            _this.rowActionHandle.style.height = "" + rowRect.height + 'px';
            _this.rowActionHandle.style.display = target.tagName === 'TH' ? 'none' : 'flex';
            // Show row dots at left side (top and bottom of row)
            var xLeft = _this.table.offsetLeft - 8;
            _this.rowTopDot.style.left = "" + xLeft + 'px';
            _this.rowBottomDot.style.left = "" + xLeft + 'px';
            _this.rowTopDot.style.top = "" + (rowRect.top - blockRect.top - 2) + 'px';
            _this.rowBottomDot.style.top = "" + (rowRect.bottom - blockRect.top - 2) + 'px';
            _this.rowTopDot.style.display = 'block';
            _this.rowBottomDot.style.display = 'block';
            // Ignore row dots when hover over table header
            if (_this.hoveredRow.querySelector('th')) {
                _this.rowTopDot.style.display = 'none';
                _this.rowBottomDot.style.display = 'none';
            }
            // Hit zones at left side for dot
            var xLeftHit = xLeft - 5;
            _this.rowTopHit.style.left = "" + xLeftHit + 'px';
            _this.rowBottomHit.style.left = "" + xLeftHit + 'px';
            _this.rowTopHit.style.top = "" + (rowRect.top - blockRect.top - 9) + 'px';
            _this.rowBottomHit.style.top = "" + (rowRect.bottom - blockRect.top - 9) + 'px';
            _this.rowTopHit.style.display = 'block';
            _this.rowBottomHit.style.display = 'block';
            // Column positioning (dots only)
            var cell = target.closest('td, th');
            var isRowNumberCell = cell.classList.contains('e-row-number');
            var cellRect = cell.getBoundingClientRect();
            var rowEl = cell.parentElement;
            var colIndex = Array.from(rowEl.cells).filter(function (c) { return !c.classList.contains('e-row-number'); }).indexOf(cell);
            _this.hoveredColIndex = colIndex;
            var dotY = _this.table.offsetTop - 8;
            var dotHalfWidth = 2;
            var borderValue = Math.round(parseFloat(getComputedStyle(cell).borderWidth));
            var leftColX = cellRect.left - blockRect.left - borderValue - dotHalfWidth;
            var rightColX = cellRect.right - blockRect.left - borderValue - dotHalfWidth;
            _this.colLeftDot.style.left = "" + leftColX + 'px';
            _this.colRightDot.style.left = "" + rightColX + 'px';
            _this.colLeftDot.style.top = "" + dotY + 'px';
            _this.colRightDot.style.top = "" + dotY + 'px';
            _this.colLeftDot.style.display = 'block';
            _this.colRightDot.style.display = 'block';
            if (cell.classList.contains('e-row-number')) {
                _this.colLeftDot.style.display = 'none';
                _this.colRightDot.style.display = 'none';
            }
            _this.colLeftHit.style.left = "" + (leftColX - 5) + 'px';
            _this.colRightHit.style.left = "" + (rightColX - 5) + 'px';
            _this.colLeftHit.style.top = "" + (dotY - 7) + 'px';
            _this.colRightHit.style.top = "" + (dotY - 7) + 'px';
            _this.colLeftHit.style.display = 'block';
            _this.colRightHit.style.display = 'block';
            if (!isRowNumberCell) {
                var headerCell = _this.table.querySelectorAll('thead th:not(.e-row-number)')[colIndex];
                if (headerCell) {
                    var headerRect = headerCell.getBoundingClientRect();
                    var borderValue_1 = Math.round(parseFloat(getComputedStyle(headerCell).borderWidth));
                    _this.colActionHandle.style.left = "" + ((headerRect.left - borderValue_1) - blockRect.left) + 'px';
                    _this.colActionHandle.style.width = "" + (headerRect.width + borderValue_1) + 'px';
                }
                else {
                    _this.colActionHandle.style.left = "" + ((cellRect.left - borderValue) - blockRect.left) + 'px';
                    _this.colActionHandle.style.width = "" + (cellRect.width + borderValue) + 'px';
                }
                _this.colActionHandle.dataset.colIndex = colIndex.toString();
                _this.colActionHandle.style.display = 'flex';
            }
            else {
                _this.colActionHandle.style.display = 'none';
            }
        });
    };
    // 4) Row insert UI and handlers
    TableUIManager.prototype.wireRowInsert = function () {
        var _this = this;
        var showRowLine = function (which) {
            if (!_this.hoveredRow) {
                return;
            }
            var rowRect = _this.hoveredRow.getBoundingClientRect();
            var blockRect = _this.blockElement.getBoundingClientRect();
            var tbody = _this.table.tBodies[0];
            var index = Array.from(tbody.rows).indexOf(_this.hoveredRow);
            _this.rowHoverLine.style.top = "" + ((which === 'top' ? rowRect.top : rowRect.bottom) - blockRect.top - 2) + 'px';
            _this.rowHoverLine.style.left = "" + _this.table.offsetLeft + 'px';
            _this.rowHoverLine.style.width = "" + _this.table.offsetWidth + 'px';
            _this.rowHoverLine.style.display = 'block';
            var dotTop = which === 'top' ? _this.rowTopDot : _this.rowBottomDot;
            var dotRect = dotTop.getBoundingClientRect();
            _this.rowInsertHandle.style.top = "" + (dotRect.top - blockRect.top - 7) + 'px';
            _this.rowInsertHandle.style.left = "" + (dotRect.left - blockRect.left - 11) + 'px';
            _this.rowInsertHandle.style.display = 'flex';
            dotTop.style.visibility = 'hidden';
            _this.rowTopHit.style.display = 'none';
            _this.rowBottomHit.style.display = 'none';
            _this.rowInsertHandle.dataset.rowIndex = (which === 'top' ? index : index + 1).toString();
        };
        var hideRowLine = function () {
            _this.rowHoverLine.style.display = 'none';
            _this.rowInsertHandle.style.display = 'none';
            _this.rowTopDot.style.visibility = '';
            _this.rowBottomDot.style.visibility = '';
        };
        this.rowTopHit.addEventListener('mouseenter', function () { return showRowLine('top'); });
        this.rowBottomHit.addEventListener('mouseenter', function () { return showRowLine('bottom'); });
        this.rowInsertHandle.addEventListener('mouseleave', hideRowLine);
        this.rowInsertHandle.addEventListener('click', function (e) {
            e.preventDefault();
            var index = parseInt(_this.rowInsertHandle.dataset.rowIndex, 10);
            _this.parent.tableService.addRowAt({
                blockId: _this.blockElement.id,
                rowIndex: index
            });
            requestAnimationFrame(function () {
                _this.hideRowUI(_this.rowInsertHandle, _this.rowHoverLine, _this.rowActionHandle, _this.rowTopDot, _this.rowBottomDot);
            });
            _this.rowTopHit.style.display = 'none';
            _this.rowBottomHit.style.display = 'none';
            _this.clearPinnedGripperSelection();
        });
    };
    // 5) Column insert UI and handlers
    TableUIManager.prototype.wireColInsert = function () {
        var _this = this;
        var showColLine = function (side) {
            if (_this.hoveredColIndex == null) {
                return;
            }
            var rows = Array.from(_this.table.rows);
            var cells = Array.from(rows[0].cells).filter((function (cell) { return !cell.classList.contains('e-row-number'); }));
            var anyRowCell = cells[_this.hoveredColIndex];
            var blockRect = _this.blockElement.getBoundingClientRect();
            var rect = anyRowCell.getBoundingClientRect();
            var boundary = side === 'right' ? rect.right : rect.left;
            _this.colHoverLine.style.left = "" + (boundary - blockRect.left - 2) + 'px';
            _this.colHoverLine.style.top = "" + _this.table.offsetTop + 'px';
            _this.colHoverLine.style.height = "" + _this.table.offsetHeight + 'px';
            _this.colHoverLine.style.display = 'block';
            var dotEl = side === 'left' ? _this.colLeftDot : _this.colRightDot;
            var dotRect = dotEl.getBoundingClientRect();
            _this.colInsertHandle.style.left = "" + (dotRect.left - blockRect.left - 7) + 'px';
            _this.colInsertHandle.style.top = "" + (dotRect.top - blockRect.top - 11) + 'px';
            _this.colInsertHandle.style.display = 'flex';
            dotEl.style.visibility = 'hidden';
            _this.colLeftHit.style.display = 'none';
            _this.colRightHit.style.display = 'none';
            _this.colInsertHandle.dataset.colIndex = (side === 'right' ? _this.hoveredColIndex + 1 : _this.hoveredColIndex).toString();
        };
        var hideColLine = function () {
            _this.colHoverLine.style.display = 'none';
            _this.colInsertHandle.style.display = 'none';
            _this.colLeftDot.style.visibility = '';
            _this.colRightDot.style.visibility = '';
        };
        this.colLeftHit.addEventListener('mouseenter', function () { return showColLine('left'); });
        this.colRightHit.addEventListener('mouseenter', function () { return showColLine('right'); });
        this.colInsertHandle.addEventListener('mouseleave', hideColLine);
        this.colInsertHandle.addEventListener('click', function (e) {
            e.preventDefault();
            var index = parseInt(_this.colInsertHandle.dataset.colIndex, 10);
            _this.parent.tableService.addColumnAt({
                blockId: _this.blockElement.id,
                colIndex: index
            });
            requestAnimationFrame(function () {
                _this.hideColUI(_this.colInsertHandle, _this.colHoverLine, _this.colActionHandle, _this.colLeftDot, _this.colRightDot);
            });
            _this.colLeftHit.style.display = 'none';
            _this.colRightHit.style.display = 'none';
            _this.clearPinnedGripperSelection();
        });
    };
    // 6) Row/Col action handle wiring
    TableUIManager.prototype.wireActionHandles = function () {
        var _this = this;
        // Row action
        this.rowActionHandle.addEventListener('click', function (e) {
            if (_this.rowInsertHandle.style.display !== 'none') {
                return;
            }
            e.preventDefault();
            var domRowIdx = parseInt(_this.rowActionHandle.dataset.rowIndex, 10);
            var rowEl = _this.table.rows[domRowIdx];
            var cellBlock = rowEl.querySelector('.e-block');
            var props = _this.blockModel.properties;
            var modelIndex = toModelRow(domRowIdx, props.enableHeader);
            var rowRect = rowEl.getBoundingClientRect();
            var blockRect = _this.blockElement.getBoundingClientRect();
            _this.parent.tableService.removeCellFocus(_this.table);
            _this.applyRowSelection(_this.table, domRowIdx);
            setCursorPosition(getBlockContentElement(cellBlock), 0);
            _this.parent.setFocusToBlock(cellBlock);
            _this.rowPinned.style.top = "" + Math.round(rowRect.top - blockRect.top - 1) + 'px';
            _this.rowPinned.style.height = "" + (rowRect.height + 1) + 'px';
            _this.rowPinned.classList.add('e-action-bar-active');
            _this.rowPinned.style.display = 'flex';
            _this.rowActionHandle.style.display = 'none';
            _this.colPinned.style.display = 'none';
            _this.colPinned.classList.remove('e-action-bar-active');
            _this.showGripperPopup(_this.rowActionHandle, _this.rowPinned, _this.blockModel, {
                label: 'Delete Row', iconCss: 'e-trash', callback: function () {
                    _this.parent.tableService.deleteRowAt({
                        blockId: _this.blockElement.id,
                        modelIndex: modelIndex
                    });
                }
            });
        });
        // Column action
        this.colActionHandle.addEventListener('mousedown', function (e) { return e.preventDefault(); });
        this.colActionHandle.addEventListener('click', function (e) {
            if (_this.colInsertHandle.style.display !== 'none') {
                return;
            }
            e.preventDefault();
            var domColIdx = parseInt(_this.colActionHandle.dataset.colIndex, 10);
            var headerCell = _this.table.querySelectorAll('thead th:not(.e-row-number)')[domColIdx];
            var blockRect = _this.blockElement.getBoundingClientRect();
            var cell = getDataCell(_this.table, (headerCell ? 1 : 0), _this.hoveredColIndex);
            var cellBlock = cell.querySelector('.e-block');
            var cellRect = cell.getBoundingClientRect();
            var cellBorderValue = Math.round(parseFloat(getComputedStyle(cell).borderWidth));
            var colPinnedLeftOffset = (cellRect.left - cellBorderValue) - blockRect.left;
            var colPinnedWidth = cellRect.width + cellBorderValue;
            _this.parent.tableService.removeCellFocus(_this.table);
            _this.applyColumnSelection(_this.table, domColIdx);
            setCursorPosition(getBlockContentElement(cellBlock), 0);
            _this.parent.setFocusToBlock(cellBlock);
            if (headerCell) {
                var headerRect = headerCell.getBoundingClientRect();
                var headerBorderValue = Math.round(parseFloat(getComputedStyle(headerCell).borderWidth));
                colPinnedLeftOffset = (headerRect.left - headerBorderValue) - blockRect.left;
                colPinnedWidth = headerRect.width + headerBorderValue;
            }
            _this.colPinned.style.left = "" + colPinnedLeftOffset + 'px';
            _this.colPinned.style.width = "" + colPinnedWidth + 'px';
            _this.colPinned.classList.add('e-action-bar-active');
            _this.colPinned.style.display = 'flex';
            _this.colActionHandle.style.display = 'none';
            _this.rowPinned.style.display = 'none';
            _this.rowPinned.classList.remove('e-action-bar-active');
            _this.showGripperPopup(_this.colActionHandle, _this.colPinned, _this.blockModel, {
                label: 'Delete Column', iconCss: 'e-trash', callback: function () {
                    _this.parent.tableService.deleteColumnAt({
                        blockId: _this.blockElement.id,
                        colIndex: domColIdx
                    });
                }
            });
        });
    };
    TableUIManager.prototype.clearPinnedGripperSelection = function () {
        // Clear selections
        this.applyRowSelection(this.table, -1);
        this.applyColumnSelection(this.table, -1);
        // hide pinned handles
        this.rowPinned.style.display = 'none';
        this.rowPinned.classList.remove('e-action-bar-active');
        this.colPinned.style.display = 'none';
        this.colPinned.classList.remove('e-action-bar-active');
    };
    // 7) Table focus, mouseleave, and outside-click cleanup
    TableUIManager.prototype.wireFocusAndCleanup = function () {
        var _this = this;
        this.table.addEventListener('focusin', function () {
            _this.applyRowSelection(_this.table, -1);
            _this.applyColumnSelection(_this.table, -1);
            _this.rowPinned.style.display = 'none';
            _this.colPinned.style.display = 'none';
        });
        this.blockElement.addEventListener('mouseleave', function () {
            _this.hideRowUI(_this.rowInsertHandle, _this.rowHoverLine, _this.rowActionHandle, _this.rowTopDot, _this.rowBottomDot);
            _this.hideColUI(_this.colInsertHandle, _this.colHoverLine, _this.colActionHandle, _this.colLeftDot, _this.colRightDot);
            [_this.rowTopHit, _this.rowBottomHit, _this.colLeftHit, _this.colRightHit].forEach(function (el) { return el.style.display = 'none'; });
            _this.rowTopDot.style.visibility = '';
            _this.rowBottomDot.style.visibility = '';
            _this.colLeftDot.style.visibility = '';
            _this.colRightDot.style.visibility = '';
        });
        this.table.addEventListener('mousedown', function (e) {
            var target = e.target;
            var cell = target.closest('td, th');
            if (!cell || (cell && cell.classList.contains('e-row-number'))) {
                return;
            }
            if (cell.classList.contains('e-cell-focus')) {
                var selectedCells = _this.parent.tableSelectionManager.getSelectedCells(_this.blockElement);
                if (selectedCells && selectedCells.length === 1) {
                    return;
                }
            }
            _this.parent.tableService.removeCellFocus(_this.table);
            _this.parent.tableService.addCellFocus(cell, true);
        });
        var onDocClick = function (e) {
            var t = e.target;
            var inside = !!t.closest("table.e-table-element[data-block-id=\"" + _this.blockId + "\"]");
            var blkEl = t.closest('.e-table-block');
            var tableSlashItem = t.closest('.e-list-item[data-value="Table"]');
            if (inside || (blkEl && blkEl.contains(t)) || tableSlashItem) {
                return;
            }
            _this.applyRowSelection(_this.table, -1);
            _this.applyColumnSelection(_this.table, -1);
            document.querySelectorAll('.e-row-action-handle.e-pinned').forEach(function (node) { return (node.style.display = 'none'); });
            document.querySelectorAll('.e-col-action-handle.e-pinned').forEach(function (node) { return (node.style.display = 'none'); });
            if (_this.parent.tableService) {
                _this.parent.tableService.removeCellFocus(_this.table);
            }
        };
        document.addEventListener('click', onDocClick);
    };
    // 8) Observers and sync helpers
    TableUIManager.prototype.wireObservers = function () {
        var _this = this;
        var RO = window.ResizeObserver;
        if (RO) {
            var ro_1 = new RO(function () { _this.syncRowUI(); });
            ro_1.observe(this.table);
            Array.from(this.table.rows).forEach(function (r) { return ro_1.observe(r); });
            Array.from(this.table.querySelectorAll('th')).forEach(function (th) { return ro_1.observe(th); });
        }
    };
    TableUIManager.prototype.syncRowUI = function () {
        if (!this.hoveredRow) {
            return;
        }
        var rowRect = this.hoveredRow.getBoundingClientRect();
        var blockRect = this.blockElement.getBoundingClientRect();
        var xLeft = this.table.offsetLeft - 8;
        this.rowTopDot.style.left = "" + xLeft + 'px';
        this.rowBottomDot.style.left = "" + xLeft + 'px';
        this.rowTopDot.style.top = "" + (rowRect.top - blockRect.top - 2) + 'px';
        this.rowBottomDot.style.top = "" + (rowRect.bottom - blockRect.top - 2) + 'px';
        if (this.rowActionHandle.style.display !== 'none') {
            this.rowActionHandle.style.top = "" + (rowRect.top - blockRect.top) + 'px';
            this.rowActionHandle.style.height = "" + rowRect.height + 'px';
        }
        var pinnedRow = this.blockElement.querySelector('.e-row-action-handle.e-pinned');
        if (pinnedRow && pinnedRow.style.display !== 'none') {
            pinnedRow.style.top = "" + (rowRect.top - blockRect.top) + 'px';
            pinnedRow.style.height = "" + rowRect.height + 'px';
        }
    };
    TableUIManager.prototype.hideRowUI = function (insertHandle, line, actionHandle, dotTop, dotBottom) {
        insertHandle.style.display = 'none';
        line.style.display = 'none';
        actionHandle.style.display = 'none';
        dotTop.style.display = 'none';
        dotBottom.style.display = 'none';
    };
    TableUIManager.prototype.hideColUI = function (insertHandle, line, actionHandle, dotLeft, dotRight) {
        insertHandle.style.display = 'none';
        line.style.display = 'none';
        actionHandle.style.display = 'none';
        dotLeft.style.display = 'none';
        dotRight.style.display = 'none';
    };
    TableUIManager.prototype.applyRowSelection = function (table, rowIndex) {
        Array.from(table.rows).forEach(function (r) { return r.classList.remove('e-row-selected'); });
        Array.from(table.querySelectorAll('td, th')).forEach(function (c) { return c.classList.remove('e-col-selected'); });
        if (rowIndex == null || rowIndex < 0) {
            return;
        }
        var row = table.rows[rowIndex];
        if (row) {
            row.classList.add('e-row-selected');
        }
    };
    TableUIManager.prototype.applyColumnSelection = function (table, colIndex) {
        Array.from(table.rows).forEach(function (r) { return r.classList.remove('e-row-selected'); });
        Array.from(table.querySelectorAll('td, th')).forEach(function (c) { return c.classList.remove('e-col-selected'); });
        if (colIndex == null || colIndex < 0) {
            return;
        }
        Array.from(table.rows).forEach(function (r) {
            var cells = Array.from(r.cells).filter(function (cell) { return !cell.classList.contains('e-row-number'); });
            if (cells[colIndex]) {
                cells[colIndex].classList.add('e-col-selected');
            }
        });
    };
    TableUIManager.prototype.showGripperPopup = function (actionHandle, pinnedActionHandle, blockModel, action) {
        var _this = this;
        var existingPopup = this.parent.rootEditorElement.querySelector('.e-table-gripper-action-popup');
        var isColumnGripper = actionHandle.classList.contains('e-col-action-handle');
        var isRowGripper = actionHandle.classList.contains('e-row-action-handle');
        var props = blockModel.properties;
        if (existingPopup && existingPopup.parentElement) {
            existingPopup.parentElement.removeChild(existingPopup);
        }
        if ((isColumnGripper && props.columns.length <= 1) || (isRowGripper && props.rows.length <= 1)) {
            return;
        }
        var removePopup = function (e) {
            var target = e.target;
            if (!popup.contains(target) && !target.closest('.e-action-handle')) {
                if (_this.popupObj && _this.parent && _this.parent.popupRenderer) {
                    _this.popupObj.hide();
                    _this.parent.popupRenderer.destroyPopup(_this.popupObj);
                    _this.popupObj = null;
                }
                document.removeEventListener('click', removePopup);
            }
        };
        document.addEventListener('click', removePopup);
        var popup = createElement('div', {
            className: 'e-table-gripper-action-popup'
        });
        this.parent.rootEditorElement.appendChild(popup);
        var item = createElement('div', {
            className: "e-table-gripper-action-item e-icons " + action.iconCss
        });
        item.addEventListener('click', function (e) {
            e.stopPropagation();
            action.callback();
            if (_this.popupObj && _this.parent && _this.parent.popupRenderer) {
                _this.popupObj.hide();
                _this.parent.popupRenderer.destroyPopup(_this.popupObj);
                actionHandle.style.display = 'none';
                pinnedActionHandle.style.display = 'none';
            }
        });
        popup.appendChild(item);
        var iconType = actionHandle.getAttribute('data-icon-type');
        var args = {
            element: popup,
            content: item,
            width: 'auto',
            height: 'auto',
            relateTo: actionHandle,
            position: { X: 'left', Y: 'top' },
            offsetX: iconType === 'col' ? 20 : -11,
            offsetY: iconType === 'col' ? -8 : 21
        };
        this.popupObj = this.parent.popupRenderer.renderPopup(args);
        this.popupObj.show();
        this.parent.popupRenderer.adjustPopupPositionRelativeToTarget(pinnedActionHandle, this.popupObj);
    };
    TableUIManager.prototype.destroy = function () {
        this.rowInsertHandle = null;
        this.rowActionHandle = null;
        this.rowHoverLine = null;
        this.rowTopDot = null;
        this.rowBottomDot = null;
        this.colInsertHandle = null;
        this.colActionHandle = null;
        this.colHoverLine = null;
        this.colLeftDot = null;
        this.colRightDot = null;
        this.rowPinned = null;
        this.colPinned = null;
        this.rowTopHit = null;
        this.rowBottomHit = null;
        this.colLeftHit = null;
        this.colRightHit = null;
        // State
        this.hoveredRow = null;
        this.hoveredColIndex = null;
        this.isMultiSelecting = null;
        // Instance
        if (this.popupObj) {
            this.parent.popupRenderer.destroyPopup(this.popupObj);
            this.popupObj = null;
        }
    };
    return TableUIManager;
}());
export { TableUIManager };
