performanceresultscreens 0.0.1

package/dist/components/Organisms/ISEditor-V2/TableModal.js

@@ -0,0 +1,743 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const icons_1 = require("@chakra-ui/icons");
+const ai_1 = require("react-icons/ai");
+const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const EditorConstants_1 = require("./EditorConstants");
+const TableModal = ({ isOpen, onClose, onSubmit, tableData, setTableData, }) => {
+    const [localTableData, setLocalTableData] = (0, react_1.useState)(tableData);
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    // Confirmation dialog state
+    const [isConfirmOpen, setIsConfirmOpen] = (0, react_1.useState)(false);
+    const [pendingAction, setPendingAction] = (0, react_1.useState)(null);
+    const cancelRef = (0, react_1.useRef)(null);
+    const [fullScreen, setFullScreen] = (0, react_1.useState)(false);
+    const [isMergeMode, setIsMergeMode] = (0, react_1.useState)(false);
+    const [mergeDialogOpen, setMergeDialogOpen] = (0, react_1.useState)(false);
+    const [selectedCell, setSelectedCell] = (0, react_1.useState)(null);
+    const [cellsToRight, setCellsToRight] = (0, react_1.useState)(0);
+    const [cellsBelow, setCellsBelow] = (0, react_1.useState)(0);
+    const [mergeError, setMergeError] = (0, react_1.useState)(null);
+    // When modal opens, initialize localTableData
+    (0, react_1.useEffect)(() => {
+        // Ensure headerRows is set, default to 1 if not present
+        const initialData = {
+            ...tableData,
+            headerRows: tableData.headerRows || 1
+        };
+        setLocalTableData(initialData);
+        setIsEditing(false);
+    }, [tableData, isOpen]);
+    const isHeaderRow = (rowIndex) => {
+        return rowIndex < localTableData.headerRows;
+    };
+    const isCellPartOfMerge = (row, col) => {
+        const cell = localTableData.cells?.[row]?.[col];
+        return cell?.isHidden || (cell?.rowSpan > 1) || (cell?.colSpan > 1);
+    };
+    const rowHasMergedCells = (rowIndex) => {
+        const row = localTableData.cells?.[rowIndex];
+        if (!row)
+            return false;
+        return row.some(cell => cell?.rowSpan > 1 ||
+            cell?.colSpan > 1 ||
+            cell?.isHidden);
+    };
+    // Check if merging would collide with existing merged cells
+    const checkMergeCollision = (startRow, startCol, rowSpan, colSpan) => {
+        // Check if trying to merge header with non-header cells
+        const isStartHeader = isHeaderRow(startRow);
+        for (let r = startRow; r < startRow + rowSpan; r++) {
+            if (isHeaderRow(r) !== isStartHeader) {
+                return "Cannot merge header cells with data cells. Header cells can only be merged with other header cells.";
+            }
+        }
+        // Get the current cell's merge information
+        const currentCell = localTableData.cells?.[startRow]?.[startCol];
+        const currentRowSpan = currentCell?.rowSpan || 1;
+        const currentColSpan = currentCell?.colSpan || 1;
+        for (let r = startRow; r < startRow + rowSpan; r++) {
+            for (let c = startCol; c < startCol + colSpan; c++) {
+                // Skip the starting cell
+                if (r === startRow && c === startCol)
+                    continue;
+                // Check if cell is out of bounds
+                if (r >= localTableData.rows || c >= localTableData.cols) {
+                    return `Cannot merge beyond table boundaries (${localTableData.rows} rows, ${localTableData.cols} columns)`;
+                }
+                const cell = localTableData.cells?.[r]?.[c];
+                // Skip cells that are already part of the current merge being expanded
+                if (cell?.isHidden && cell?.mergedWith?.row === startRow && cell?.mergedWith?.col === startCol) {
+                    continue;
+                }
+                // Check if cell is already part of another merge (different from current)
+                if (cell?.isHidden && cell?.mergedWith &&
+                    (cell.mergedWith.row !== startRow || cell.mergedWith.col !== startCol)) {
+                    return `Cannot merge: Cell at row ${r + 1}, column ${c + 1} is already part of another merged cell`;
+                }
+                // Check if cell is the start of another merge (different from current)
+                if ((cell?.rowSpan > 1 || cell?.colSpan > 1) && !(r === startRow && c === startCol)) {
+                    return `Cannot merge: Cell at row ${r + 1}, column ${c + 1} is already merged with other cells`;
+                }
+            }
+        }
+        return null;
+    };
+    const checkForNonEmptyData = (type, position) => {
+        if (type === 'row') {
+            if (localTableData.cells[position]) {
+                return localTableData.cells[position].some(cell => cell && cell.value && cell.value.trim() !== "");
+            }
+        }
+        else if (type === 'col') {
+            for (let i = 0; i < localTableData.rows; i++) {
+                const cell = localTableData.cells[i]?.[position];
+                if (cell && cell.value && cell.value.trim() !== "") {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    const getMergedCellsInRow = (rowIndex) => {
+        const mergedCells = [];
+        const row = localTableData.cells[rowIndex];
+        if (!row)
+            return mergedCells;
+        for (let colIndex = 0; colIndex < row.length; colIndex++) {
+            const cell = row[colIndex];
+            if (cell && (cell.rowSpan > 1 || cell.colSpan > 1)) {
+                mergedCells.push({
+                    startRow: rowIndex,
+                    startCol: colIndex,
+                    endRow: rowIndex + cell.rowSpan - 1,
+                    endCol: colIndex + cell.colSpan - 1,
+                    rowSpan: cell.rowSpan,
+                    colSpan: cell.colSpan
+                });
+            }
+        }
+        return mergedCells;
+    };
+    const getMergedCellsInColumn = (colIndex) => {
+        const mergedCells = [];
+        for (let rowIndex = 0; rowIndex < localTableData.rows; rowIndex++) {
+            const cell = localTableData.cells[rowIndex]?.[colIndex];
+            if (cell && (cell.rowSpan > 1 || cell.colSpan > 1)) {
+                mergedCells.push({
+                    startRow: rowIndex,
+                    startCol: colIndex,
+                    endRow: rowIndex + cell.rowSpan - 1,
+                    endCol: colIndex + cell.colSpan - 1,
+                    rowSpan: cell.rowSpan,
+                    colSpan: cell.colSpan
+                });
+            }
+        }
+        return mergedCells;
+    };
+    const getAllMergedCells = () => {
+        const mergedCells = [];
+        for (let rowIndex = 0; rowIndex < localTableData.rows; rowIndex++) {
+            for (let colIndex = 0; colIndex < localTableData.cols; colIndex++) {
+                const cell = localTableData.cells[rowIndex]?.[colIndex];
+                if (cell && (cell.rowSpan > 1 || cell.colSpan > 1)) {
+                    mergedCells.push({
+                        startRow: rowIndex,
+                        startCol: colIndex,
+                        endRow: rowIndex + cell.rowSpan - 1,
+                        endCol: colIndex + cell.colSpan - 1,
+                        rowSpan: cell.rowSpan,
+                        colSpan: cell.colSpan
+                    });
+                }
+            }
+        }
+        return mergedCells;
+    };
+    const handleAddHeaderRow = () => {
+        const newRows = localTableData.rows + 1;
+        const newHeaderRows = localTableData.headerRows + 1;
+        const newCells = [...localTableData.cells];
+        // Insert new header row at the position of headerRows (right after existing headers)
+        const newHeaderRowIndex = localTableData.headerRows;
+        const newHeaderRow = Array(localTableData.cols).fill(null).map(() => ({
+            value: "",
+            rowSpan: 1,
+            colSpan: 1,
+            isHidden: false
+        }));
+        newCells.splice(newHeaderRowIndex, 0, newHeaderRow);
+        setLocalTableData({
+            ...localTableData,
+            rows: newRows,
+            headerRows: newHeaderRows,
+            cells: newCells,
+        });
+        setIsEditing(true);
+    };
+    const handleDeleteHeaderRow = (headerRowIndex) => {
+        // Don't delete if only 1 header row
+        if (localTableData.headerRows <= 1)
+            return;
+        // Check if header row has data
+        if (checkForNonEmptyData('header', headerRowIndex)) {
+            setPendingAction({
+                type: 'header',
+                action: 'delete',
+                position: headerRowIndex
+            });
+            setIsConfirmOpen(true);
+            return;
+        }
+        // If there's no data to lose, delete directly
+        applyDeleteHeaderRow(headerRowIndex);
+    };
+    const applyDeleteHeaderRow = (headerRowIndex) => {
+        // Create a deep copy of cells
+        const newCells = [...localTableData.cells];
+        // Remove the header row
+        newCells.splice(headerRowIndex, 1);
+        setLocalTableData({
+            ...localTableData,
+            rows: localTableData.rows - 1,
+            headerRows: localTableData.headerRows - 1,
+            cells: newCells,
+        });
+        setIsEditing(true);
+    };
+    const adjustMergedCellsAfterRowDelete = (deletedRowIndex, newCells) => {
+        const allMergedCells = getAllMergedCells();
+        allMergedCells.forEach(merge => {
+            const { startRow, startCol, endRow, rowSpan } = merge;
+            if (deletedRowIndex < startRow) {
+                // Merge starts after deleted row - shift up
+                if (newCells[startRow - 1] && newCells[startRow - 1][startCol]) {
+                    newCells[startRow - 1][startCol].rowSpan = rowSpan;
+                    newCells[startRow - 1][startCol].colSpan = merge.colSpan;
+                }
+            }
+            else if (deletedRowIndex >= startRow && deletedRowIndex <= endRow) {
+                // Deleted row is within merge - reduce rowSpan
+                const newRowSpan = Math.max(1, rowSpan - 1);
+                if (newCells[startRow] && newCells[startRow][startCol]) {
+                    newCells[startRow][startCol].rowSpan = newRowSpan;
+                }
+            }
+        });
+        // Update mergedWith references
+        for (let i = 0; i < newCells.length; i++) {
+            for (let j = 0; j < newCells[i].length; j++) {
+                const cell = newCells[i][j];
+                if (cell.mergedWith) {
+                    const { row: mergedRow, col: mergedCol } = cell.mergedWith;
+                    if (mergedRow > deletedRowIndex) {
+                        cell.mergedWith.row = mergedRow - 1;
+                    }
+                    else if (mergedRow === deletedRowIndex) {
+                        // The cell this was merged with is being deleted
+                        cell.isHidden = false;
+                        cell.mergedWith = undefined;
+                    }
+                }
+            }
+        }
+    };
+    const adjustMergedCellsAfterColumnDelete = (deletedColIndex, newCells) => {
+        const allMergedCells = getAllMergedCells();
+        allMergedCells.forEach(merge => {
+            const { startRow, startCol, endCol, colSpan } = merge;
+            if (deletedColIndex < startCol) {
+                // Merge starts after deleted column - shift left
+                if (newCells[startRow] && newCells[startRow][startCol - 1]) {
+                    newCells[startRow][startCol - 1].colSpan = colSpan;
+                    newCells[startRow][startCol - 1].rowSpan = merge.rowSpan;
+                }
+            }
+            else if (deletedColIndex >= startCol && deletedColIndex <= endCol) {
+                // Deleted column is within merge - reduce colSpan
+                const newColSpan = Math.max(1, colSpan - 1);
+                if (newCells[startRow] && newCells[startRow][startCol]) {
+                    newCells[startRow][startCol].colSpan = newColSpan;
+                }
+            }
+        });
+        // Update mergedWith references
+        for (let i = 0; i < newCells.length; i++) {
+            for (let j = 0; j < newCells[i].length; j++) {
+                const cell = newCells[i][j];
+                if (cell.mergedWith) {
+                    const { row: mergedRow, col: mergedCol } = cell.mergedWith;
+                    if (mergedCol > deletedColIndex) {
+                        cell.mergedWith.col = mergedCol - 1;
+                    }
+                    else if (mergedCol === deletedColIndex) {
+                        // The cell this was merged with is being deleted
+                        cell.isHidden = false;
+                        cell.mergedWith = undefined;
+                    }
+                }
+            }
+        }
+    };
+    const canDeleteRow = (rowIndex) => {
+        // Can't delete if it's the only data row
+        if (!isHeaderRow(rowIndex) && localTableData.rows - localTableData.headerRows <= 1) {
+            return { canDelete: false, reason: "Cannot delete the last data row" };
+        }
+        // Can't delete if it's the only header row
+        if (isHeaderRow(rowIndex) && localTableData.headerRows <= 1) {
+            return { canDelete: false, reason: "Cannot delete the last header row" };
+        }
+        // Check if deleting this row would break any merged cells completely
+        const allMergedCells = getAllMergedCells();
+        for (const merge of allMergedCells) {
+            if (merge.rowSpan === 1)
+                continue; // Single row merges are fine
+            if (rowIndex >= merge.startRow && rowIndex <= merge.endRow) {
+                // This row is part of a merge
+                if (merge.rowSpan === 1) {
+                    return { canDelete: false, reason: `Cannot delete row ${rowIndex + 1} as it would break a merged cell` };
+                }
+            }
+        }
+        return { canDelete: true };
+    };
+    const canDeleteColumn = (colIndex) => {
+        // Can't delete if it's the only column
+        if (localTableData.cols <= 1) {
+            return { canDelete: false, reason: "Cannot delete the last column" };
+        }
+        // Check if deleting this column would break any merged cells completely
+        const allMergedCells = getAllMergedCells();
+        for (const merge of allMergedCells) {
+            if (merge.colSpan === 1)
+                continue; // Single column merges are fine
+            if (colIndex >= merge.startCol && colIndex <= merge.endCol) {
+                // This column is part of a merge
+                if (merge.colSpan === 1) {
+                    return { canDelete: false, reason: `Cannot delete column ${colIndex + 1} as it would break a merged cell` };
+                }
+            }
+        }
+        return { canDelete: true };
+    };
+    const handleAddRow = () => {
+        // Validate current state
+        if (!localTableData.cells || localTableData.cols <= 0) {
+            console.error("Invalid table state");
+            return;
+        }
+        const newRows = localTableData.rows + 1;
+        // Create a proper deep copy of existing cells
+        const newCells = localTableData.cells.map(row => [...row]);
+        // Create new row with proper cell structure
+        const newRow = Array(localTableData.cols).fill(null).map(() => ({
+            value: "",
+            rowSpan: 1,
+            colSpan: 1,
+            isHidden: false
+        }));
+        // Add the new row
+        newCells.push(newRow);
+        setLocalTableData({
+            ...localTableData,
+            rows: newRows,
+            cells: newCells,
+        });
+        setIsEditing(true);
+    };
+    const handleDeleteRow = (rowIndex) => {
+        const deleteCheck = canDeleteRow(rowIndex);
+        if (!deleteCheck.canDelete) {
+            // You can show an error message here
+            console.warn(deleteCheck.reason);
+            return;
+        }
+        // Check if row has data
+        if (checkForNonEmptyData('row', rowIndex)) {
+            setPendingAction({
+                type: 'row',
+                action: 'delete',
+                position: rowIndex
+            });
+            setIsConfirmOpen(true);
+            return;
+        }
+        // If there's no data to lose, delete directly
+        applyDeleteRow(rowIndex);
+    };
+    const handleAddColumn = () => {
+        // Validate current state
+        if (!localTableData.cells || localTableData.rows <= 0) {
+            console.error("Invalid table state");
+            return;
+        }
+        // Validate all rows exist and have proper structure
+        for (let i = 0; i < localTableData.rows; i++) {
+            if (!localTableData.cells[i] || !Array.isArray(localTableData.cells[i])) {
+                console.error(`Invalid row structure at index ${i}`);
+                return;
+            }
+        }
+        const newCols = localTableData.cols + 1;
+        // Create new cells array with updated dimensions
+        const newCells = localTableData.cells.map((row, rowIndex) => {
+            if (!row || !Array.isArray(row)) {
+                console.error(`Invalid row at index ${rowIndex}`);
+                return Array(newCols).fill(null).map(() => ({
+                    value: "",
+                    rowSpan: 1,
+                    colSpan: 1,
+                    isHidden: false
+                }));
+            }
+            const newRow = [...row];
+            newRow.push({
+                value: "",
+                rowSpan: 1,
+                colSpan: 1,
+                isHidden: false
+            });
+            return newRow;
+        });
+        setLocalTableData({
+            ...localTableData,
+            cols: newCols,
+            cells: newCells,
+        });
+        setIsEditing(true);
+    };
+    const handleDeleteColumn = (colIndex) => {
+        const deleteCheck = canDeleteColumn(colIndex);
+        if (!deleteCheck.canDelete) {
+            // You can show an error message here
+            console.warn(deleteCheck.reason);
+            return;
+        }
+        // Check if column has data
+        if (checkForNonEmptyData('col', colIndex)) {
+            setPendingAction({
+                type: 'col',
+                action: 'delete',
+                position: colIndex
+            });
+            setIsConfirmOpen(true);
+            return;
+        }
+        // If there's no data to lose, delete directly
+        applyDeleteColumn(colIndex);
+    };
+    const applyDeleteRow = (rowIndex) => {
+        // Create a deep copy of cells
+        const newCells = localTableData.cells.map(row => [...row]);
+        // Remove the row
+        newCells.splice(rowIndex, 1);
+        // Adjust merged cells after row deletion
+        adjustMergedCellsAfterRowDelete(rowIndex, newCells);
+        // Update table data
+        const newTableData = {
+            ...localTableData,
+            rows: localTableData.rows - 1,
+            cells: newCells,
+        };
+        // If we're deleting a header row, adjust headerRows count
+        if (isHeaderRow(rowIndex)) {
+            newTableData.headerRows = localTableData.headerRows - 1;
+        }
+        setLocalTableData(newTableData);
+        setIsEditing(true);
+    };
+    const applyDeleteColumn = (colIndex) => {
+        // Create a deep copy of cells
+        const newCells = localTableData.cells.map(row => {
+            const newRow = [...row];
+            newRow.splice(colIndex, 1);
+            return newRow;
+        });
+        // Adjust merged cells after column deletion
+        adjustMergedCellsAfterColumnDelete(colIndex, newCells);
+        setLocalTableData({
+            ...localTableData,
+            cols: localTableData.cols - 1,
+            cells: newCells,
+        });
+        setIsEditing(true);
+    };
+    const handleConfirmAction = () => {
+        if (!pendingAction)
+            return;
+        if (pendingAction.type === 'row' && pendingAction.action === 'delete' && pendingAction.position !== undefined) {
+            applyDeleteRow(pendingAction.position);
+        }
+        else if (pendingAction.type === 'col' && pendingAction.action === 'delete' && pendingAction.position !== undefined) {
+            applyDeleteColumn(pendingAction.position);
+        }
+        else if (pendingAction.type === 'header' && pendingAction.action === 'delete' && pendingAction.position !== undefined) {
+            applyDeleteHeaderRow(pendingAction.position);
+        }
+        setIsConfirmOpen(false);
+        setPendingAction(null);
+    };
+    const handleCellSelect = (rowIndex, colIndex) => {
+        if (!isMergeMode)
+            return;
+        const cell = localTableData.cells?.[rowIndex]?.[colIndex];
+        if (cell?.isHidden)
+            return; // Skip hidden cells
+        setSelectedCell({ row: rowIndex, col: colIndex });
+        // Initialize with current merge dimensions if cell is already merged
+        const currentRowSpan = cell?.rowSpan || 1;
+        const currentColSpan = cell?.colSpan || 1;
+        setCellsToRight(currentColSpan - 1);
+        setCellsBelow(currentRowSpan - 1);
+        setMergeError(null);
+        setMergeDialogOpen(true);
+    };
+    const handleMergeCells = () => {
+        if (!selectedCell)
+            return;
+        const { row, col } = selectedCell;
+        const rowSpan = cellsBelow + 1;
+        const colSpan = cellsToRight + 1;
+        // Check for collisions before merging
+        const collisionError = checkMergeCollision(row, col, rowSpan, colSpan);
+        if (collisionError) {
+            setMergeError(collisionError);
+            return;
+        }
+        // Create new cells array
+        const newCells = localTableData.cells.map(rowArr => [...rowArr]);
+        // Get current merge information
+        const currentCell = newCells[row][col];
+        const currentRowSpan = currentCell.rowSpan || 1;
+        const currentColSpan = currentCell.colSpan || 1;
+        // First, reset the existing merge if it's being contracted
+        if (currentRowSpan > rowSpan || currentColSpan > colSpan) {
+            // Unmerge cells that are no longer part of the new merge
+            for (let r = row; r < row + currentRowSpan; r++) {
+                for (let c = col; c < col + currentColSpan; c++) {
+                    if (r === row && c === col)
+                        continue;
+                    if (r >= row + rowSpan || c >= col + colSpan) {
+                        // This cell is no longer part of the merge
+                        newCells[r][c] = {
+                            ...newCells[r][c],
+                            isHidden: false,
+                            mergedWith: undefined
+                        };
+                    }
+                }
+            }
+        }
+        // Update parent cell with new dimensions
+        newCells[row][col] = {
+            ...newCells[row][col],
+            rowSpan,
+            colSpan
+        };
+        // Mark all cells in the new merge area as hidden (except the parent)
+        for (let r = row; r < row + rowSpan; r++) {
+            for (let c = col; c < col + colSpan; c++) {
+                if (r === row && c === col)
+                    continue;
+                newCells[r][c] = {
+                    ...newCells[r][c],
+                    isHidden: true,
+                    mergedWith: { row, col }
+                };
+            }
+        }
+        setLocalTableData({
+            ...localTableData,
+            cells: newCells
+        });
+        setIsEditing(true);
+        setMergeDialogOpen(false);
+    };
+    const handleCellChange = (rowIndex, colIndex, value) => {
+        // Create a deep copy of cells to avoid mutating state directly
+        const newCells = localTableData.cells.map(row => [...row]);
+        const cell = newCells[rowIndex][colIndex];
+        // Ensure the cell exists
+        if (cell.mergedWith) {
+            const { row, col } = cell.mergedWith;
+            newCells[row][col] = {
+                ...newCells[row][col],
+                value
+            };
+        }
+        else {
+            newCells[rowIndex][colIndex] = {
+                ...cell,
+                value
+            };
+        }
+        setLocalTableData({
+            ...localTableData,
+            cells: newCells
+        });
+        setIsEditing(true);
+    };
+    const handleDragEnd = (result) => {
+        if (!result.destination)
+            return;
+        const sourceIndex = result.source.index;
+        const destinationIndex = result.destination.index;
+        // Don't allow moving header rows or moving data rows to header section
+        if (isHeaderRow(sourceIndex) || isHeaderRow(destinationIndex))
+            return;
+        // Don't allow moving rows that have merged cells
+        if (rowHasMergedCells(sourceIndex))
+            return;
+        // Don't allow moving to a position where merged cells would be disrupted
+        if (rowHasMergedCells(destinationIndex))
+            return;
+        // Create new cells array
+        const newCells = [...localTableData.cells];
+        const [movedRow] = newCells.splice(sourceIndex, 1);
+        newCells.splice(destinationIndex, 0, movedRow);
+        setLocalTableData({
+            ...localTableData,
+            cells: newCells,
+        });
+        setIsEditing(true);
+    };
+    const canMoveRow = (fromIndex, direction) => {
+        // Don't move header rows
+        if (isHeaderRow(fromIndex)) {
+            return { canMove: false, reason: "Cannot move header rows" };
+        }
+        // Don't move data rows into header section
+        if (direction === 'up' && fromIndex <= localTableData.headerRows) {
+            return { canMove: false, reason: "Cannot move data rows into header section" };
+        }
+        // Don't move beyond array bounds
+        if (direction === 'down' && fromIndex >= localTableData.rows - 1) {
+            return { canMove: false, reason: "Cannot move beyond table bounds" };
+        }
+        if (direction === 'up' && fromIndex <= localTableData.headerRows) {
+            return { canMove: false, reason: "Cannot move above header section" };
+        }
+        const toIndex = direction === 'up' ? fromIndex - 1 : fromIndex + 1;
+        // Check if either row has merged cells
+        const fromRowMerged = getMergedCellsInRow(fromIndex);
+        const toRowMerged = getMergedCellsInRow(toIndex);
+        if (fromRowMerged.length > 0 || toRowMerged.length > 0) {
+            return { canMove: false, reason: "Cannot move rows with merged cells" };
+        }
+        return { canMove: true };
+    };
+    const moveRow = (fromIndex, direction) => {
+        const moveCheck = canMoveRow(fromIndex, direction);
+        if (!moveCheck.canMove) {
+            console.warn(moveCheck.reason);
+            return;
+        }
+        const toIndex = direction === 'up' ? fromIndex - 1 : fromIndex + 1;
+        // Create a deep copy of cells
+        const newCells = [...localTableData.cells];
+        const [movedRow] = newCells.splice(fromIndex, 1);
+        newCells.splice(toIndex, 0, movedRow);
+        setLocalTableData({
+            ...localTableData,
+            cells: newCells,
+        });
+        setIsEditing(true);
+    };
+    const handleSubmit = () => {
+        const markdownTable = (0, EditorConstants_1.convertTableDataToMarkdown)(localTableData);
+        onSubmit(markdownTable);
+    };
+    // Calculate maximum cells that can be merged
+    const getMaxCellsToRight = () => {
+        if (!selectedCell)
+            return 0;
+        return localTableData.cols - selectedCell.col - 1;
+    };
+    const getMaxCellsBelow = () => {
+        if (!selectedCell)
+            return 0;
+        // For header cells, can only merge within header section
+        if (isHeaderRow(selectedCell.row)) {
+            return localTableData.headerRows - selectedCell.row - 1;
+        }
+        // For data cells, can only merge within data section
+        return localTableData.rows - selectedCell.row - 1;
+    };
+    const getCellHeight = (rowSpan) => {
+        const baseCellHeight = 50; // Base height for one row
+        const borderHeight = 12; // Account for borders between rows
+        return (rowSpan * baseCellHeight) + ((rowSpan - 1) * borderHeight);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: fullScreen ? "full" : "6xl", closeOnOverlayClick: false, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: isEditing ? "Edit Table" : "Create Table" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", "aria-label": "Expand", tabIndex: 0, onClick: () => setFullScreen(!fullScreen), _hover: { color: "green.500" }, children: (0, jsx_runtime_1.jsx)(ai_1.AiOutlineFullscreen, { style: { cursor: "pointer" } }) }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }) }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => setIsMergeMode(!isMergeMode), colorScheme: isMergeMode ? "blue" : "gray", children: isMergeMode ? "Exit Merge Mode" : "Merge Cells" }), isMergeMode && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: "blue.500", children: "Click on any cell to merge (headers can only merge with headers)" }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", maxHeight: "70vh", overflowY: "auto", border: "1px solid", borderColor: "gray.200", borderRadius: "md", sx: {
+                                                borderCollapse: "seperate",
+                                                borderSpacing: "0px",
+                                            }, children: (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.DragDropContext, { onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", layout: "fixed", width: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { position: "sticky", top: 0, zIndex: 2, bg: "white", children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { bg: "gray.100", children: [(0, jsx_runtime_1.jsx)(react_2.Th, { width: "80px", minWidth: "80px", textAlign: "center", border: "1px solid", borderColor: "gray.200", p: 2, children: "Reorder" }), (0, jsx_runtime_1.jsx)(react_2.Th, { width: "140px", minWidth: "140px", textAlign: "center", border: "1px solid", borderColor: "gray.200", p: 2, children: "Row" }), Array(localTableData.cols).fill(null).map((_, colIndex) => ((0, jsx_runtime_1.jsx)(react_2.Th, { textAlign: "center", border: "1px solid", borderColor: "gray.200", p: 2, width: "150px", minWidth: "150px", maxWidth: "200px", children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", children: ["Col ", colIndex + 1] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Delete column", icon: (0, jsx_runtime_1.jsx)(icons_1.DeleteIcon, {}), size: "xs", colorScheme: "red", variant: "ghost", isDisabled: localTableData.cols <= 1, onClick: () => handleDeleteColumn(colIndex) }), colIndex === localTableData.cols - 1 && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Add column", icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSquareIcon, {}), size: "xs", colorScheme: "green", variant: "ghost", onClick: handleAddColumn }))] })] }) }, colIndex)))] }) }), (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: "table-rows", children: (provided) => ((0, jsx_runtime_1.jsxs)(react_2.Tbody, { ...provided.droppableProps, ref: provided.innerRef, children: [Array(localTableData.rows).fill(null).map((_, rowIndex) => ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: `row-${rowIndex}`, index: rowIndex, isDragDisabled: isHeaderRow(rowIndex) || rowHasMergedCells(rowIndex), children: (provided, snapshot) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, bg: snapshot.isDragging
+                                                                                ? "yellow.100"
+                                                                                : isHeaderRow(rowIndex)
+                                                                                    ? "blue.50"
+                                                                                    : "transparent", opacity: rowHasMergedCells(rowIndex) ? 0.6 : 1, p: "0", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { width: "60px", children: (0, jsx_runtime_1.jsx)(react_2.Flex, { justifyContent: "center", children: isHeaderRow(rowIndex) ? ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "24px" }) // Empty placeholder for header rows
+                                                                                        ) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Move row up", icon: (0, jsx_runtime_1.jsx)(icons_1.ArrowUpIcon, {}), size: "xs", variant: "ghost", isDisabled: rowIndex <= localTableData.headerRows ||
+                                                                                                        rowHasMergedCells(rowIndex) ||
+                                                                                                        rowHasMergedCells(rowIndex - 1), onClick: () => moveRow(rowIndex, 'up'), mr: 1 }), (0, jsx_runtime_1.jsx)(icons_1.DragHandleIcon, { color: rowHasMergedCells(rowIndex) ? "gray.300" : "gray.500" }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Move row down", icon: (0, jsx_runtime_1.jsx)(icons_1.ArrowDownIcon, {}), size: "xs", variant: "ghost", isDisabled: rowIndex >= localTableData.rows - 1 ||
+                                                                                                        rowHasMergedCells(rowIndex) ||
+                                                                                                        rowHasMergedCells(rowIndex + 1), onClick: () => moveRow(rowIndex, 'down'), ml: 1 })] })) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { bg: isHeaderRow(rowIndex) ? "blue.50" : "gray.50", fontWeight: "bold", textAlign: "center", width: "100px", minWidth: "100px", maxWidth: "100px", border: "1px solid", borderColor: "gray.200", p: 2, verticalAlign: "middle", children: isHeaderRow(rowIndex) ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", children: ["Header ", rowIndex + 1] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Delete header row", icon: (0, jsx_runtime_1.jsx)(icons_1.DeleteIcon, {}), size: "xs", colorScheme: "red", variant: "ghost", isDisabled: localTableData.headerRows <= 1, onClick: () => handleDeleteHeaderRow(rowIndex) }), rowIndex === localTableData.headerRows - 1 && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Add header row", icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSquareIcon, {}), size: "xs", colorScheme: "green", variant: "ghost", onClick: handleAddHeaderRow }))] })] })) : ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", children: rowIndex - localTableData.headerRows + 1 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Delete row", icon: (0, jsx_runtime_1.jsx)(icons_1.DeleteIcon, {}), size: "xs", colorScheme: "red", variant: "ghost", isDisabled: localTableData.rows - localTableData.headerRows <= 1, onClick: () => handleDeleteRow(rowIndex) }), rowIndex === localTableData.rows - 1 && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Add row", icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSquareIcon, {}), size: "xs", colorScheme: "green", variant: "ghost", onClick: handleAddRow }))] })] })) }), Array(localTableData.cols).fill(null).map((_, colIndex) => {
+                                                                                    const cell = localTableData.cells?.[rowIndex]?.[colIndex];
+                                                                                    // Skip rendering hidden cells
+                                                                                    if (cell?.isHidden)
+                                                                                        return null;
+                                                                                    const isMultiRowCell = (cell?.rowSpan || 1) > 1;
+                                                                                    const isMultiColCell = (cell?.colSpan || 1) > 1;
+                                                                                    return ((0, jsx_runtime_1.jsx)(react_2.Td, { rowSpan: cell?.rowSpan || 1, colSpan: cell?.colSpan || 1, p: 0, border: "1px solid", borderColor: "gray.200", verticalAlign: "top", position: "relative", width: isMultiColCell ? "auto" : "150px", minWidth: isMultiColCell ? "200px" : "150px", maxWidth: isMultiColCell ? "400px" : "200px", height: isMultiRowCell ? `${getCellHeight(cell?.rowSpan || 1)}px` : "48px", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Textarea, { size: "sm", value: cell?.value || "", onChange: (e) => handleCellChange(rowIndex, colIndex, e.target.value), placeholder: isHeaderRow(rowIndex) ? `Header ${rowIndex + 1}-${colIndex + 1}` : "", fontWeight: isHeaderRow(rowIndex) ? "bold" : "normal", readOnly: isMergeMode, border: "none", outline: "none", resize: "none", width: "100%", height: "100%", minHeight: isMultiRowCell ? `${getCellHeight(cell?.rowSpan || 1)}px` : "46px", maxHeight: isMultiRowCell ? `${getCellHeight(cell?.rowSpan || 1)}px` : "46px", p: 2, bg: "transparent", _focus: {
+                                                                                                        boxShadow: "inset 0 0 0 2px blue.300",
+                                                                                                        borderRadius: "md"
+                                                                                                    }, _hover: {
+                                                                                                        bg: "gray.50"
+                                                                                                    }, whiteSpace: "pre-wrap", wordBreak: "break-word", overflow: "hidden", overflowY: "auto" }), isMergeMode && !cell?.isHidden && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", left: "0", width: "100%", height: "100%", onClick: () => handleCellSelect(rowIndex, colIndex), cursor: "pointer", bg: "rgba(0, 0, 255, 0.05)", _hover: {
+                                                                                                        bg: "rgba(0, 0, 255, 0.1)",
+                                                                                                        borderRadius: "md"
+                                                                                                    }, border: "2px dashed", borderColor: "blue.300", borderRadius: "md", zIndex: 1 }))] }) }, colIndex));
+                                                                                })] })) }, `row-${rowIndex}`))), provided.placeholder] })) })] }) }) })] }) }), (0, jsx_runtime_1.jsxs)(react_2.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", mr: 3, onClick: onClose, children: "Cancel" }), (0, jsx_runtime_1.jsxs)(react_2.Button, { colorScheme: "blue", onClick: handleSubmit, children: [isEditing ? "Update" : "Insert", " Table"] })] })] })] }), (0, jsx_runtime_1.jsx)(react_2.AlertDialog, { isOpen: isConfirmOpen, leastDestructiveRef: cancelRef, onClose: () => setIsConfirmOpen(false), children: (0, jsx_runtime_1.jsx)(react_2.AlertDialogOverlay, { children: (0, jsx_runtime_1.jsxs)(react_2.AlertDialogContent, { children: [(0, jsx_runtime_1.jsx)(react_2.AlertDialogHeader, { fontSize: "lg", fontWeight: "bold", children: "Delete Confirmation" }), (0, jsx_runtime_1.jsx)(react_2.AlertDialogBody, { children: pendingAction?.type === 'row'
+                                    ? "This row contains data. Are you sure you want to delete it? This action cannot be undone."
+                                    : "This column contains data. Are you sure you want to delete it? This action cannot be undone." }), (0, jsx_runtime_1.jsxs)(react_2.AlertDialogFooter, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { ref: cancelRef, onClick: () => setIsConfirmOpen(false), children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { colorScheme: "red", onClick: handleConfirmAction, ml: 3, children: "Delete" })] })] }) }) }), (0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: mergeDialogOpen, onClose: () => setMergeDialogOpen(false), children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { children: "Merge Cells" }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, children: [selectedCell && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: "gray.600", children: ["Selected cell: Row ", selectedCell.row + 1, ", Column ", selectedCell.col + 1] })), mergeError && ((0, jsx_runtime_1.jsxs)(react_2.Alert, { status: "error", children: [(0, jsx_runtime_1.jsx)(react_2.AlertIcon, {}), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.AlertTitle, { children: "Cannot merge cells!" }), (0, jsx_runtime_1.jsx)(react_2.AlertDescription, { children: mergeError })] })] })), (0, jsx_runtime_1.jsxs)(react_2.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_2.FormLabel, { children: "How many additional cells to the right?" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: "gray.500", mb: 2, children: "Enter 0 to merge only the selected cell, 1 to include the next cell to the right, etc." }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Decrease cells to right", icon: (0, jsx_runtime_1.jsx)(icons_1.ArrowDownIcon, {}), size: "sm", onClick: () => {
+                                                                setCellsToRight(Math.max(0, cellsToRight - 1));
+                                                                setMergeError(null);
+                                                            }, isDisabled: cellsToRight <= 0 }), (0, jsx_runtime_1.jsx)(react_2.Input, { type: "number", min: "0", max: getMaxCellsToRight(), value: cellsToRight, readOnly: true, textAlign: "center", onKeyDown: (e) => {
+                                                                if (e.key === 'ArrowUp') {
+                                                                    e.preventDefault();
+                                                                    setCellsToRight(Math.min(getMaxCellsToRight(), cellsToRight + 1));
+                                                                    setMergeError(null);
+                                                                }
+                                                                else if (e.key === 'ArrowDown') {
+                                                                    e.preventDefault();
+                                                                    setCellsToRight(Math.max(0, cellsToRight - 1));
+                                                                    setMergeError(null);
+                                                                }
+                                                            }, width: "80px" }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Increase cells to right", icon: (0, jsx_runtime_1.jsx)(icons_1.ArrowUpIcon, {}), size: "sm", onClick: () => {
+                                                                setCellsToRight(Math.min(getMaxCellsToRight(), cellsToRight + 1));
+                                                                setMergeError(null);
+                                                            }, isDisabled: cellsToRight >= getMaxCellsToRight() })] }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: "gray.500", mt: 1, children: ["Maximum: ", getMaxCellsToRight(), " cells"] })] }), (0, jsx_runtime_1.jsxs)(react_2.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_2.FormLabel, { children: "How many additional cells below?" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: "gray.500", mb: 2, children: "Enter 0 to merge only the selected row, 1 to include the next row below, etc." }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Decrease cells below", icon: (0, jsx_runtime_1.jsx)(icons_1.ArrowDownIcon, {}), size: "sm", onClick: () => {
+                                                                setCellsBelow(Math.max(0, cellsBelow - 1));
+                                                                setMergeError(null);
+                                                            }, isDisabled: cellsBelow <= 0 }), (0, jsx_runtime_1.jsx)(react_2.Input, { type: "number", min: "0", max: getMaxCellsBelow(), value: cellsBelow, readOnly: true, textAlign: "center", onKeyDown: (e) => {
+                                                                if (e.key === 'ArrowUp') {
+                                                                    e.preventDefault();
+                                                                    setCellsBelow(Math.min(getMaxCellsBelow(), cellsBelow + 1));
+                                                                    setMergeError(null);
+                                                                }
+                                                                else if (e.key === 'ArrowDown') {
+                                                                    e.preventDefault();
+                                                                    setCellsBelow(Math.max(0, cellsBelow - 1));
+                                                                    setMergeError(null);
+                                                                }
+                                                            }, width: "80px" }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Increase cells below", icon: (0, jsx_runtime_1.jsx)(icons_1.ArrowUpIcon, {}), size: "sm", onClick: () => {
+                                                                setCellsBelow(Math.min(getMaxCellsBelow(), cellsBelow + 1));
+                                                                setMergeError(null);
+                                                            }, isDisabled: cellsBelow >= getMaxCellsBelow() })] }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: "gray.500", mt: 1, children: ["Maximum: ", getMaxCellsBelow(), " cells"] })] }), (cellsToRight > 0 || cellsBelow > 0) && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 3, bg: "blue.50", borderRadius: "md", width: "100%", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: "blue.800", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Preview:" }), " This will merge ", cellsToRight + 1, " column(s) and ", cellsBelow + 1, " row(s), affecting ", (cellsToRight + 1) * (cellsBelow + 1), " cell(s) total."] }) }))] }) }), (0, jsx_runtime_1.jsxs)(react_2.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "outline", mr: 3, onClick: () => setMergeDialogOpen(false), children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { colorScheme: "blue", onClick: handleMergeCells, isDisabled: mergeError !== null, children: "Merge Cells" })] })] })] })] }));
+};
+exports.default = TableModal;
+//# sourceMappingURL=TableModal.js.map