import { jsx as _jsx } from "react/jsx-runtime";
import { Button, Portal } from '@gravity-ui/uikit';
import { cn } from "../../../../../classname.js";
import { bindActions } from "../../../../../core/index.js";
import { ErrorLoggerBoundary } from "../../../../../react-utils/ErrorBoundary.js";
import { getTableDimensions } from "../../../../../table-utils/index.js";
import { getReactRendererFromState } from "../../../../behavior/ReactRenderer/index.js";
import { controlActions } from "./actions.js";
import "./view.css";
const wrapperB = cn('table-wrapper');
export const viewB = cn('table-view');
export const yfmTableView = (node, view, getPos) => {
    const actions = bindActions(controlActions)(view);
    const wrapperElem = document.createElement('div');
    wrapperElem.classList.add(wrapperB());
    const tableElem = document.createElement('table');
    tableElem.classList.add(viewB());
    const viewElem = document.createElement('div');
    viewElem.classList.add(viewB('wrapper'));
    const controls = document.createElement('div');
    controls.setAttribute('contenteditable', 'false');
    const hackStrip = document.createElement('div');
    // this is a strip of a table height. it's a hack so that content of table doesn't get outside of editor borders
    // and thus editing buttons are not cropped
    hackStrip.classList.add(viewB('hack-strip'));
    viewElem.appendChild(hackStrip);
    viewElem.appendChild(tableElem);
    viewElem.appendChild(controls);
    wrapperElem.appendChild(viewElem);
    const components = [
        _jsx("div", { className: viewB('plus-button-controls', { bottom: true }), children: _jsx(Button, { onClick: () => {
                    actions.appendRow.run({ tablePos: getPos() });
                }, className: viewB('plus-button', { bottom: true }), view: 'normal', children: "+" }) }, 1),
        _jsx("div", { className: viewB('plus-button-controls', { right: true }), children: _jsx(Button, { onClick: () => {
                    actions.appendColumn.run({ tablePos: getPos() });
                }, className: viewB('plus-button', { right: true }), view: 'normal', children: "+" }) }, 2),
    ];
    const renderItem = getReactRendererFromState(view.state).createItem('yfm-table-plus-buttons', () => (_jsx(Portal, { container: controls, children: _jsx(ErrorLoggerBoundary, { children: components }) })));
    return {
        dom: wrapperElem,
        contentDOM: tableElem,
        destroy() {
            renderItem.remove();
            viewElem.remove();
        },
        update(n) {
            const { rows: nRows, cols: nCols } = getTableDimensions(n);
            const { rows, cols } = getTableDimensions(node);
            return !(rows !== nRows || cols !== nCols);
        },
        ignoreMutation(mutation) {
            return (mutation.type === 'childList' &&
                (mutation.target === controls || controls.contains(mutation.target)));
        },
    };
};
//# sourceMappingURL=view.js.map
