"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.yfmTableView = exports.viewB = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const uikit_1 = require("@gravity-ui/uikit");
const classname_1 = require("../../../../../classname.js");
const core_1 = require("../../../../../core/index.js");
const ErrorBoundary_1 = require("../../../../../react-utils/ErrorBoundary.js");
const table_utils_1 = require("../../../../../table-utils/index.js");
const ReactRenderer_1 = require("../../../../behavior/ReactRenderer/index.js");
const actions_1 = require("./actions.js");
require("./view.css");
const wrapperB = (0, classname_1.cn)('table-wrapper');
exports.viewB = (0, classname_1.cn)('table-view');
const yfmTableView = (node, view, getPos) => {
    const actions = (0, core_1.bindActions)(actions_1.controlActions)(view);
    const wrapperElem = document.createElement('div');
    wrapperElem.classList.add(wrapperB());
    const tableElem = document.createElement('table');
    tableElem.classList.add((0, exports.viewB)());
    const viewElem = document.createElement('div');
    viewElem.classList.add((0, exports.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((0, exports.viewB)('hack-strip'));
    viewElem.appendChild(hackStrip);
    viewElem.appendChild(tableElem);
    viewElem.appendChild(controls);
    wrapperElem.appendChild(viewElem);
    const components = [
        (0, jsx_runtime_1.jsx)("div", { className: (0, exports.viewB)('plus-button-controls', { bottom: true }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: () => {
                    actions.appendRow.run({ tablePos: getPos() });
                }, className: (0, exports.viewB)('plus-button', { bottom: true }), view: 'normal', children: "+" }) }, 1),
        (0, jsx_runtime_1.jsx)("div", { className: (0, exports.viewB)('plus-button-controls', { right: true }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { onClick: () => {
                    actions.appendColumn.run({ tablePos: getPos() });
                }, className: (0, exports.viewB)('plus-button', { right: true }), view: 'normal', children: "+" }) }, 2),
    ];
    const renderItem = (0, ReactRenderer_1.getReactRendererFromState)(view.state).createItem('yfm-table-plus-buttons', () => ((0, jsx_runtime_1.jsx)(uikit_1.Portal, { container: controls, children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorLoggerBoundary, { children: components }) })));
    return {
        dom: wrapperElem,
        contentDOM: tableElem,
        destroy() {
            renderItem.remove();
            viewElem.remove();
        },
        update(n) {
            const { rows: nRows, cols: nCols } = (0, table_utils_1.getTableDimensions)(n);
            const { rows, cols } = (0, table_utils_1.getTableDimensions)(node);
            return !(rows !== nRows || cols !== nCols);
        },
        ignoreMutation(mutation) {
            return (mutation.type === 'childList' &&
                (mutation.target === controls || controls.contains(mutation.target)));
        },
    };
};
exports.yfmTableView = yfmTableView;
//# sourceMappingURL=view.js.map
