"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.yfmTableCellView = exports.yfmTableCellCn = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
// @ts-ignore // TODO: fix cjs build
const prosemirror_utils_1 = require("prosemirror-utils");
const classname_1 = require("../../../../../classname.js");
const core_1 = require("../../../../../core/index.js");
const yfm_table_1 = require("../../../../../i18n/yfm-table/index.js");
const ErrorBoundary_1 = require("../../../../../react-utils/ErrorBoundary.js");
const table_utils_1 = require("../../../../../table-utils/index.js");
const node_children_1 = require("../../../../../utils/node-children.js");
const nodes_1 = require("../../../../../utils/nodes.js");
const ReactRenderer_1 = require("../../../../behavior/ReactRenderer/index.js");
const const_1 = require("../../const.js");
const actions_1 = require("./actions.js");
require("./yfmTableCellView.css");
exports.yfmTableCellCn = (0, classname_1.cn)('table-cell-view');
const b = exports.yfmTableCellCn;
const Controls = function Controls({ columnNumber, rowNumber, view, getParentTable, isInFirstRow, isFirstInRow, }) {
    const actions = (0, core_1.bindActions)(actions_1.controlActions)(view);
    const controls = [];
    if (isFirstInRow) {
        controls.push((0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { switcherWrapperClassName: b('left-button'), renderSwitcher: (props) => ((0, jsx_runtime_1.jsx)(uikit_1.Button, { view: 'outlined', size: 's', ...props, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.EllipsisVertical }) })), items: [
                {
                    text: (0, yfm_table_1.i18n)('row.add.before'),
                    action: () => actions.appendRow.run({
                        tablePos: getParentTable()?.pos,
                        rowNumber,
                        direction: 'before',
                    }),
                    iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowUp }),
                    disabled: !actions.appendRow.isEnable({
                        tablePos: getParentTable()?.pos,
                        rowNumber,
                        direction: 'before',
                    }),
                },
                {
                    text: (0, yfm_table_1.i18n)('row.add.after'),
                    action: () => actions.appendRow.run({
                        tablePos: getParentTable()?.pos,
                        rowNumber,
                        direction: 'after',
                    }),
                    iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowDown }),
                    disabled: !actions.appendRow.isEnable({
                        tablePos: getParentTable()?.pos,
                        rowNumber,
                        direction: 'after',
                    }),
                },
                {
                    text: (0, yfm_table_1.i18n)('row.remove'),
                    action: () => actions.deleteRow.run({
                        rowNumber,
                        tablePos: getParentTable()?.pos,
                    }),
                    iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Xmark }),
                    disabled: !actions.deleteRow.isEnable({
                        rowNumber,
                        tablePos: getParentTable()?.pos,
                    }),
                },
                {
                    theme: 'danger',
                    text: (0, yfm_table_1.i18n)('table.remove'),
                    action: () => actions.deleteTable.run({
                        tablePos: getParentTable()?.pos,
                        tableNode: getParentTable()?.node,
                    }),
                    iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin }),
                    disabled: !actions.deleteTable.isEnable({
                        tablePos: getParentTable()?.pos,
                        tableNode: getParentTable()?.node,
                    }),
                },
            ] }, 1));
    }
    if (isInFirstRow) {
        controls.push((0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { switcherWrapperClassName: b('upper-button'), renderSwitcher: (props) => ((0, jsx_runtime_1.jsx)(uikit_1.Button, { view: 'outlined', size: 's', ...props, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.EllipsisVertical }) })), items: [
                {
                    text: (0, yfm_table_1.i18n)('column.add.before'),
                    action: () => actions.appendColumn.run({
                        tablePos: getParentTable()?.pos,
                        columnNumber,
                        direction: 'before',
                    }),
                    iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowLeft }),
                    disabled: !actions.appendColumn.isEnable({
                        tablePos: getParentTable()?.pos,
                        columnNumber,
                        direction: 'before',
                    }),
                },
                {
                    text: (0, yfm_table_1.i18n)('column.add.after'),
                    action: () => actions.appendColumn.run({
                        tablePos: getParentTable()?.pos,
                        columnNumber,
                        direction: 'after',
                    }),
                    iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowRight }),
                    disabled: !actions.appendColumn.isEnable({
                        tablePos: getParentTable()?.pos,
                        columnNumber,
                        direction: 'after',
                    }),
                },
                {
                    text: (0, yfm_table_1.i18n)('column.remove'),
                    action: () => actions.deleteColumn.run({
                        columnNumber,
                        tablePos: getParentTable()?.pos,
                    }),
                    iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Xmark }),
                    disabled: !actions.deleteColumn.isEnable({
                        columnNumber,
                        tablePos: getParentTable()?.pos,
                    }),
                },
                {
                    theme: 'danger',
                    text: (0, yfm_table_1.i18n)('table.remove'),
                    action: () => actions.deleteTable.run({
                        tablePos: getParentTable()?.pos,
                        tableNode: getParentTable()?.node,
                    }),
                    iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin }),
                    disabled: !actions.deleteTable.isEnable({
                        tablePos: getParentTable()?.pos,
                        tableNode: getParentTable()?.node,
                    }),
                },
            ] }, 2));
    }
    return controls.length ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: controls }) : null;
};
const yfmTableCellView = (node, view, getPos) => {
    const getParentTable = () => (0, prosemirror_utils_1.findParentNodeClosestToPos)(view.state.doc.resolve(getPos()), table_utils_1.isTableNode);
    const parentTable = getParentTable();
    const cellCoords = parentTable ? findCellCoords(parentTable.node, node) : null;
    // @ts-expect-error
    if (!cellCoords)
        return {};
    const { cellIndex, rowIndex } = cellCoords;
    const isFirstRow = rowIndex === 0;
    const isFirstColumn = cellIndex === 0;
    if (!isFirstRow && !isFirstColumn) {
        // in this case, we don't need custom nodeView.
        // @ts-expect-error
        return {};
    }
    const dom = document.createElement('td');
    if (node.attrs[const_1.YfmTableAttr.Colspan])
        dom.setAttribute('colspan', node.attrs[const_1.YfmTableAttr.Colspan]);
    if (node.attrs[const_1.YfmTableAttr.Rowspan])
        dom.setAttribute('rowspan', node.attrs[const_1.YfmTableAttr.Rowspan]);
    if (node.attrs[const_1.YfmTableAttr.CellAlign]) {
        dom.classList.add(node.attrs[const_1.YfmTableAttr.CellAlign]);
        dom.setAttribute(const_1.YfmTableAttr.CellAlign, node.attrs[const_1.YfmTableAttr.Rowspan]);
    }
    const contentDOM = document.createElement('div');
    const control = document.createElement('span');
    control.setAttribute('style', 'width: 0; height: 0; float: left;');
    dom.setAttribute('style', 'position: relative; overflow: visible;');
    dom.appendChild(contentDOM);
    dom.appendChild(control);
    const renderItem = (0, ReactRenderer_1.getReactRendererFromState)(view.state).createItem('yfm-table-cell-view', () => ((0, jsx_runtime_1.jsx)(uikit_1.Portal, { container: control, children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorLoggerBoundary, { children: (0, jsx_runtime_1.jsx)(Controls, { columnNumber: cellIndex, rowNumber: rowIndex, isFirstInRow: isFirstColumn, isInFirstRow: isFirstRow, getParentTable: getParentTable, view: view }) }) })));
    return {
        dom,
        contentDOM,
        destroy() {
            renderItem.remove();
        },
        ignoreMutation(mutation) {
            return mutation.target === control || control.contains(mutation.target);
        },
        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);
        },
    };
};
exports.yfmTableCellView = yfmTableCellView;
function findCellCoords(table, cell) {
    if (!table.lastChild)
        return null;
    const rows = (0, nodes_1.getChildrenOfNode)(table.lastChild); // children of tBody
    for (const row of rows) {
        const node = (0, node_children_1.getChildByNode)(row.node, cell);
        if (node) {
            return {
                rowIndex: row.index,
                cellIndex: node.index,
            };
        }
    }
    return null;
}
//# sourceMappingURL=yfmTableCellView.js.map
