import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $createTableNodeWithDimensions, INSERT_TABLE_COMMAND, TableNode } from '@lexical/table';
import { $insertNodes, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import * as React from 'react';
import invariant from '../shared/invariant';
import Button from '../ui/Button';
import { DialogActions } from '../ui/Dialog';
import TextInput from '../ui/TextInput';
export const INSERT_NEW_TABLE_COMMAND = createCommand('INSERT_NEW_TABLE_COMMAND');
export const CellContext = createContext({
    cellEditorConfig: null,
    cellEditorPlugins: null,
    set: () => {
        // Empty
    },
});
export function TableContext({ children }) {
    const [contextValue, setContextValue] = useState({
        cellEditorConfig: null,
        cellEditorPlugins: null,
    });
    return (React.createElement(CellContext.Provider, { value: useMemo(() => ({
            cellEditorConfig: contextValue.cellEditorConfig,
            cellEditorPlugins: contextValue.cellEditorPlugins,
            set: (cellEditorConfig, cellEditorPlugins) => {
                setContextValue({ cellEditorConfig, cellEditorPlugins });
            },
        }), [contextValue.cellEditorConfig, contextValue.cellEditorPlugins]) }, children));
}
export function InsertTableDialog({ activeEditor, onClose, }) {
    const [rows, setRows] = useState('5');
    const [columns, setColumns] = useState('5');
    const [isDisabled, setIsDisabled] = useState(true);
    useEffect(() => {
        const row = Number(rows);
        const column = Number(columns);
        if (row && row > 0 && row <= 500 && column && column > 0 && column <= 50) {
            setIsDisabled(false);
        }
        else {
            setIsDisabled(true);
        }
    }, [rows, columns]);
    const onClick = () => {
        activeEditor.dispatchCommand(INSERT_TABLE_COMMAND, {
            columns,
            rows,
        });
        onClose();
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(TextInput, { "data-test-id": 'table-modal-rows', label: 'Rows', onChange: setRows, placeholder: '# of rows (1-500)', type: 'number', value: rows }),
        React.createElement(TextInput, { "data-test-id": 'table-modal-columns', label: 'Columns', onChange: setColumns, placeholder: '# of columns (1-50)', type: 'number', value: columns }),
        React.createElement(DialogActions, { "data-test-id": 'table-model-confirm-insert' },
            React.createElement(Button, { disabled: isDisabled, onClick: onClick }, "Confirm"))));
}
export function TablePlugin({ cellEditorConfig, children, }) {
    const [editor] = useLexicalComposerContext();
    const cellContext = useContext(CellContext);
    useEffect(() => {
        if (!editor.hasNodes([TableNode])) {
            invariant(false, 'TablePlugin: TableNode is not registered on editor');
        }
        cellContext.set(cellEditorConfig, children);
        return editor.registerCommand(INSERT_NEW_TABLE_COMMAND, ({ columns, includeHeaders, rows }) => {
            const tableNode = $createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
            $insertNodes([tableNode]);
            return true;
        }, COMMAND_PRIORITY_EDITOR);
    }, [cellContext, cellEditorConfig, children, editor]);
    return null;
}
//# sourceMappingURL=TablePlugin.js.map