import React, { useMemo, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { GlobalAudioPlayer } from '@wix/patterns-fields';
import { PatternsFieldsProvider } from '../../providers/PatternsFieldsProvider';
import { TableVirtual } from '../Table/TableVirtual';
import { EditableCell } from './EditableCell';
import { EditableTableContextMenu } from './EditableTableContextMenu';
import { useEditableTableContextMenu } from './useEditableTableContextMenu';
import { MessageActionModal } from '../ActionModal';
import { useEditableTableCollectionSyncProps } from './useEditableTableCollectionSyncProps';
import { useKeyboardNavigation } from './useKeyboardNavigation';
import { useClipboardHandler } from './useClipboardHandler';
import { useClearFocusOnBlur } from './useClearFocusOnBlur';
import { useMouseSweepSelection } from './useMouseSweepSelection';
import { AddItemRow } from './AddItemRow';
import { useAddRow } from './useAddRow';
import { useHeaderActions } from './useHeaderActions';
function _EditableTable(props) {
    const { state, columns: editableColumns, hideHeaderActions, dataHook, children, ...tableBaseProps } = props;
    useEditableTableCollectionSyncProps(props);
    const containerRef = useRef(null);
    const keyboard = useKeyboardNavigation(state);
    useClipboardHandler(state, containerRef);
    const { onFocus, onBlur } = useClearFocusOnBlur(state.cellInteraction);
    useMouseSweepSelection(state, containerRef);
    const builtInActions = useHeaderActions(state, editableColumns, hideHeaderActions);
    const { showAddItemRow, handleAddItem } = useAddRow(state);
    const tableColumns = useMemo(() => editableColumns.map((col) => ({
        ...col,
        name: col.name ?? (typeof col.title === 'string' ? col.title : col.id),
        titleSuffix: builtInActions[col.id],
        render: (_item, rowNum) => {
            const rowKey = state.keyedItems[rowNum]?.key;
            return rowKey ? (React.createElement(EditableCell, { state: state, rowKey: rowKey, columnId: col.id })) : null;
        },
    })), [editableColumns, state, builtInActions]);
    const contextMenu = useEditableTableContextMenu(state.cellInteraction);
    return (React.createElement(PatternsFieldsProvider, null,
        React.createElement("div", { ref: containerRef, "data-hook": dataHook, tabIndex: 0, onKeyDown: keyboard.onKeyDown, onFocus: onFocus, onBlur: onBlur, onContextMenu: contextMenu.handleContextMenu },
            React.createElement(TableVirtual, { ...tableBaseProps, state: state.tableState, columns: tableColumns, forceResize: true, horizontalScroll: true, showSelection: true, showRowNumbers: true }, showAddItemRow && React.createElement(AddItemRow, { onAdd: handleAddItem }))),
        React.createElement(EditableTableContextMenu, { state: state, position: contextMenu.position, cell: contextMenu.cell, menuRef: contextMenu.menuRef, onClose: contextMenu.handleClose }),
        state.deleteConfirmModal.value && (React.createElement(MessageActionModal, { state: state.deleteConfirmModal, ...state.deleteConfirmModal.value })),
        state.fieldActions.confirmModal.value && (React.createElement(MessageActionModal, { state: state.fieldActions.confirmModal, ...state.fieldActions.confirmModal.value, primaryButtonProps: {
                ...state.fieldActions.confirmModal.value.primaryButtonProps,
                disabled: state.fieldActions.deleteTask.status.isLoading,
            } })),
        children,
        React.createElement(GlobalAudioPlayer, null)));
}
export const EditableTable = observer(_EditableTable);
//# sourceMappingURL=EditableTable.js.map