import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, memo, useCallback } from 'react';
import classNames from 'classnames';
import Typography from '../../Typography';
import Icon from '../../Icon';
import Checkbox from '../../Checkbox';
import { prepareData } from '../../../utils/TableCell/TableCell';
import { getColumnLeftPosition } from '../utils/virtualization';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
// OPTIMIZATION: Memoize to prevent re-rendering when parent Table updates
const SortableRow = memo(({ row, index, serialNumber, columns, tableBodyRowClass, handleOnclick, tableDataTextColor, withCheckbox, onSelectClick, draggable, isRowCheckBoxDisable, isRowDisabled, freezeColumns, updateRowHeight, editMode, isAccordionOpen, accordionContent, selectedNode, }) => {
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
        id: row?._id || row?.id,
        disabled: row.disabled || !!editMode,
    });
    const rowRef = useRef(null);
    const accordionRef = useRef(null);
    const updateHeight = useCallback(() => {
        if (!updateRowHeight)
            return;
        const mainRowHeight = rowRef.current?.getBoundingClientRect().height || 0;
        const accordionHeight = accordionRef.current?.getBoundingClientRect().height || 0;
        const totalHeight = mainRowHeight + accordionHeight;
        if (totalHeight > 0) {
            updateRowHeight(index, totalHeight);
        }
    }, [index, updateRowHeight]);
    useEffect(() => {
        const mainElement = rowRef.current;
        const accordionElement = accordionRef.current;
        if (!updateRowHeight)
            return;
        // OPTIMIZATION: ResizeObserver
        // We do NOT call getBoundingClientRect() here anymore.
        // Calling it manually forces the browser to calculate layout immediately (Reflow).
        // The observer will deliver the height asynchronously without freezing the thread.
        const observer = new ResizeObserver(() => {
            updateHeight();
        });
        if (mainElement)
            observer.observe(mainElement);
        if (accordionElement)
            observer.observe(accordionElement);
        return () => {
            observer.disconnect();
        };
    }, [updateHeight, isAccordionOpen]);
    const key = row?.[selectedNode?.key] || row._id || row.id;
    const selectedRow = key === selectedNode.selected;
    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
    };
    return (_jsxs(_Fragment, { children: [_jsx("tr", { ref: (node) => {
                    if (rowRef.current !== node) {
                        rowRef.current = node;
                    }
                    setNodeRef(node);
                }, className: classNames('ff-table-data-row ', tableBodyRowClass, {
                    'ff-table-disabled': row.disabled && isRowDisabled,
                    'ff-table-selected-node': selectedRow,
                }), id: key, style: style, children: columns.map((column, columnIndex) => {
                    const isFrozen = freezeColumns && columnIndex < freezeColumns;
                    return (_jsx("td", { onClick: () => handleOnclick(column, row), style: {
                            position: isFrozen ? 'sticky' : 'static',
                            left: isFrozen
                                ? getColumnLeftPosition(columnIndex, columns, freezeColumns)
                                : 'auto',
                            zIndex: isFrozen ? 100 : 'auto',
                            backgroundColor: isFrozen
                                ? 'var(--input-label-bg-color)'
                                : 'transparent',
                            width: column.width ? `${column.width}px` : 'auto',
                            padding: '7px 8px',
                            boxSizing: 'border-box',
                            paddingRight: isFrozen ? 0 : '8px',
                        }, className: classNames('ff-table-data-cell ff-table-icon-container', column.className, {
                            'ff-table-clickable-cell': column.onClick,
                            'ff-table-sticky-column': isFrozen,
                        }), children: _jsxs(Typography, { as: "div", color: tableDataTextColor, className: "ff-table-data-container", children: [columnIndex === 0 && withCheckbox && (_jsx("span", { className: "ff-table-checkbox-table", children: _jsx(Checkbox, { onChange: (e) => onSelectClick(e, row), checked: row.checked, disabled: isRowCheckBoxDisable === undefined
                                            ? !!row.disabled
                                            : isRowCheckBoxDisable }) })), columnIndex === 0 && draggable && (_jsxs(_Fragment, { children: [_jsx("span", { className: row.disabled ? 'ff-table-drag' : 'ff-table-drag-icon', ...listeners, ...attributes, children: _jsx(Icon, { name: "drag", className: "ff-table-drag-active" }) }), _jsx(Typography, { color: "var(--brand-color)", children: serialNumber && `${serialNumber}.` })] })), prepareData(row, column)] }) }, column.accessor + columnIndex));
                }) }, key), isAccordionOpen && (_jsx("tr", { ref: accordionRef, children: _jsx("td", { className: "ff-table-data-cell", colSpan: columns.length, children: _jsx("div", { style: { maxHeight: 'none', overflow: 'visible' }, children: accordionContent }) }) }))] }));
}, 
// OPTIMIZATION: Custom Memo Comparison
// Returns true if props are equal (prevents re-render)
(prev, next) => {
    return (prev.row === next.row &&
        prev.index === next.index &&
        prev.serialNumber === next.serialNumber &&
        prev.updateRowHeight === next.updateRowHeight &&
        prev.columns === next.columns);
});
export default SortableRow;
//# sourceMappingURL=SortableRow.js.map