import { TableView } from '@tiptap/pm/tables';
export class UmbTableView extends TableView {
    #containerAttributes;
    #blockContainer;
    #innerTableContainer;
    #controlsContainer;
    constructor(node, cellMinWidth, containerAttributes) {
        super(node, cellMinWidth);
        this.#containerAttributes = containerAttributes ?? {};
        this.#blockContainer = this.#createBlockContainer();
        this.#innerTableContainer = this.#createInnerTableContainer();
        this.#controlsContainer = this.#createControlsContainer();
        this.#setupDOMStructure();
        this.#updateTableStyle(node);
    }
    #createBlockContainer() {
        const container = document.createElement('div');
        container.className = 'umb-tiptap-table';
        Object.entries(this.#containerAttributes).forEach(([key, value]) => {
            if (key === 'class') {
                container.className += ' ' + value;
            }
            else {
                container.setAttribute(key, value);
            }
        });
        return container;
    }
    #createInnerTableContainer() {
        const container = document.createElement('div');
        container.className = 'table-container';
        return container;
    }
    #createControlsContainer() {
        const container = document.createElement('div');
        container.className = 'table-controls';
        return container;
    }
    #setupDOMStructure() {
        // The parent TableView creates: <div class="tableWrapper"><table>...</table></div>
        // We restructure to: blockContainer > tableWrapper > innerTableContainer + controlsContainer
        const tableWrapper = this.dom;
        const tableElement = tableWrapper.firstChild;
        if (!tableElement)
            return;
        // Move table into inner container
        this.#innerTableContainer.appendChild(tableElement);
        // Build the new structure
        tableWrapper.appendChild(this.#innerTableContainer);
        tableWrapper.appendChild(this.#controlsContainer);
        this.#blockContainer.appendChild(tableWrapper);
        // Update the DOM reference
        this.dom = this.#blockContainer;
    }
    ignoreMutation(mutation) {
        // Only track mutations inside the table-container (the actual table content)
        // Ignore mutations in controls and overlay containers
        const target = mutation.target;
        const isInsideTable = target.closest('.table-container');
        return !isInsideTable || super.ignoreMutation(mutation);
    }
    update(node) {
        if (!super.update(node))
            return false;
        this.#updateTableStyle(node);
        return true;
    }
    #updateTableStyle(node) {
        if (node.attrs.style) {
            // NOTE: The `min-width` inline style is handled by the Tiptap TableView, so we need to preserve it. [LK]
            const minWidth = this.table.style.minWidth;
            const styles = node.attrs.style;
            this.table.style.cssText = `${styles}; min-width: ${minWidth};`;
        }
    }
}
