import { jsx as _jsx } from "react/jsx-runtime";
import { getLoggerFromState } from "../../../../../../core/index.js";
import { getReactRendererFromState } from "../../../../../behavior/ReactRenderer/index.js";
import { range } from "../../../../../../lodash.js";
import { ErrorLoggerBoundary } from "../../../../../../react-utils/index.js";
import { TableDesc } from "../../../../../../table-utils/table-desc.js";
import { insertEmptyColumn } from "../commands/insert-empty-column.js";
import { insertEmptyRow } from "../commands/insert-empty-row.js";
import { FloatingPlusControl } from "../components/FloatingPlusControl/index.js";
import { YfmTableDecorationType, YfmTableDecorationTypeKey } from "../const.js";
import "./yfm-table-view.css";
export const yfmTableView = (node, view, getPos, decorations) => {
    return new YfmTableNewView(node, view, getPos, decorations);
};
class YfmTableNewView {
    dom;
    contentDOM;
    _node;
    _view;
    _getPos;
    _renderer;
    _logger;
    _isFocused = false;
    constructor(node, view, getPos, decorations) {
        this._node = node;
        this._view = view;
        this._getPos = getPos;
        this._logger = getLoggerFromState(view.state).nested({
            node: 'yfm-table',
        });
        this.dom = this.contentDOM = view.dom.ownerDocument.createElement('table');
        this.dom.classList.add('g-md-yfm-table-view');
        this._updateFocusedState(decorations);
        this._renderer = getReactRendererFromState(view.state).createItem('yfm-table-view', () => {
            if (!this._isFocused)
                return null;
            const tableDesc = this._getTableDesc();
            if (!tableDesc)
                return null;
            const tableElem = this._view.domAtPos(tableDesc.pos + 1).node;
            const children = [];
            for (let rowIdx = 0; rowIdx < tableDesc.rows; rowIdx++) {
                const colIdx = tableDesc.base.rowsDesc[rowIdx].cells.findIndex((cell) => cell.type === 'real');
                if (colIdx >= 0) {
                    const cellPos = tableDesc.getPosForCell(rowIdx, colIdx);
                    const cellElem = this._view.domAtPos(cellPos.from + 1).node;
                    children.push(_jsx(FloatingPlusControl, { type: "row", index: rowIdx, cellElem: cellElem, tableElem: tableElem, onClick: this._onRowPlusClick }, `row-${rowIdx}-${colIdx}`));
                }
            }
            for (let colIdx = 0; colIdx < tableDesc.cols; colIdx++) {
                const rowIdx = range(0, tableDesc.rows).findIndex((rowIdx) => tableDesc.base.rowsDesc[rowIdx].cells[colIdx].type === 'real');
                if (rowIdx >= 0) {
                    const cellPos = tableDesc.getPosForCell(rowIdx, colIdx);
                    const cellElem = this._view.domAtPos(cellPos.from + 1).node;
                    children.push(_jsx(FloatingPlusControl, { type: "column", index: colIdx, cellElem: cellElem, tableElem: tableElem, onClick: this._onColumnPlusClick }, `col-${rowIdx}-${colIdx}`));
                }
            }
            return _jsx(ErrorLoggerBoundary, { children: children });
        });
    }
    update(node, decorations) {
        this._node = node;
        this._updateFocusedState(decorations);
        this._renderer.rerender();
        return true;
    }
    destroy() {
        this._renderer.remove();
    }
    _updateFocusedState(decorations) {
        this._isFocused = decorations.some((deco) => deco.spec?.[YfmTableDecorationTypeKey] === YfmTableDecorationType.FocusTable);
    }
    _getTableDesc() {
        const pos = this._getPos();
        if (typeof pos !== 'number')
            return null;
        return TableDesc.create(this._node)?.bind(pos);
    }
    _onRowPlusClick = (rowIdx) => {
        this._logger.event({ event: 'row-insert', source: 'floating-plus-button' });
        const tableDesc = this._getTableDesc();
        if (!tableDesc)
            return;
        insertEmptyRow({ tablePos: tableDesc.pos, rowIndex: rowIdx + 1 })(this._view.state, this._view.dispatch);
        this._view.focus();
    };
    _onColumnPlusClick = (colIdx) => {
        this._logger.event({ event: 'column-insert', source: 'floating-plus-button' });
        const tableDesc = this._getTableDesc();
        if (!tableDesc)
            return;
        insertEmptyColumn({ tablePos: tableDesc.pos, colIndex: colIdx + 1 })(this._view.state, this._view.dispatch);
        this._view.focus();
    };
}
//# sourceMappingURL=yfm-table-view.js.map
