import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, cloneElement, isValidElement, } from 'react';
import './StepInnerTable.scss';
import { isFunction } from '../../../assets/utils/functionUtils';
import classNames from 'classnames';
import { closestCorners, DndContext } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy, } from '@dnd-kit/sortable';
import { ffid } from '../../../utils/ffID/ffid';
import { appendNewRow } from '../../../utils/AppendNewRow/AppendNewRow';
import StepTableMainRow from './StepTableMainRow';
const StepInnerTable = ({ data = [], columns = [], headerType, withCheckbox = false, onSelect, withFixedHeader = true, borderWithRadius = false, noDataContent, height = '100%', className = '', tableBodyRowClass = '', headerTextColor, tableDataTextColor, draggable = false, onDragEnd, loadMore = () => { }, editMode = '', editComponent, NlpComponent, AddNlp, handleDragStart, tableType, viewModeId, ViewComponent, handleClick, selectedRows, handleStepGroupExpand, isStepGroupExpanded, stepPartialSelect, isViewPrivilegeMode, isClientSide }) => {
    const observerRef = useRef(null);
    useEffect(() => {
        const scrollContainer = document.getElementById('ff-table-scroll-container');
        const firstNode = document.getElementById('ff-table-first-node');
        const lastNode = document.getElementById('ff-table-last-node');
        // Exit early if data is empty or elements are missing
        if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
            return;
        }
        observerRef.current = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    const direction = entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
                    loadMore(direction);
                }
            });
        }, {
            root: scrollContainer,
            rootMargin: '8px',
            threshold: 0.1,
        });
        observerRef.current.observe(firstNode);
        observerRef.current.observe(lastNode);
        return () => {
            // Cleanup observer
            observerRef.current?.disconnect();
        };
    }, [data, loadMore]);
    const handleOnclick = (column, row, index) => {
        let { onClick, accessor } = column;
        if (onClick && isFunction(onClick)) {
            onClick(accessor, row, index);
        }
    };
    const onSelectClick = (tableType, rowData, isChecked) => {
        if (onSelect) {
            onSelect(tableType, rowData, isChecked);
        }
    };
    const handleDragEnd = (event) => {
        const { active, over } = event;
        if (!over || active.id === over.id)
            return;
        const oldIndex = data.findIndex((item) => item._id === active.id || item.stepId === active.id);
        const newIndex = data.findIndex((item) => item._id === over.id || item.stepId === over.id);
        if (oldIndex === -1 || newIndex === -1)
            return;
        if (onDragEnd)
            onDragEnd(oldIndex, newIndex);
    };
    return (_jsx(DndContext, { collisionDetection: closestCorners, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { disabled: !draggable, items: data?.map((row) => row._id || row.stepId), strategy: verticalListSortingStrategy, children: _jsxs("div", { style: { height: height, position: 'relative' }, id: "ff-table-scroll-container", className: classNames(className, {
                    'ff-fixed-header-steps-table': withFixedHeader,
                    'steps-border-borderRadius': borderWithRadius,
                }), children: [_jsxs("table", { className: classNames(`ff-table-steps`), cellSpacing: 0, children: [_jsx("thead", { className: 'steps-inner-thead', children: _jsx("tr", { children: columns?.map((column) => (_jsx("th", { className: classNames(`${headerType && `${headerType}-bg`}`, `${headerTextColor && `${headerTextColor}-color`}`), style: { width: column?.width } }, `${column.header}-${ffid()}`))) }) }), _jsxs("tbody", { className: "ff-steps-tbody", children: [_jsx("tr", { id: "ff-table-first-node" }), appendNewRow(data, AddNlp ?? {})?.map((row, index) => {
                                        const isEdit = editMode === row.stepId;
                                        const isEditOrNew = isEdit || row.isNew;
                                        const renderEditableRow = () => (_jsxs("tr", { className: "steps-edit-row", id: "getInFocus", children: [isEdit && isValidElement(editComponent) && (_jsx("td", { colSpan: columns.length, children: cloneElement(editComponent, {
                                                        rowData: row,
                                                        rowIndex: index + 1,
                                                    }) })), row.isNew && !isEdit && isValidElement(NlpComponent) && (_jsx("td", { colSpan: columns.length, children: cloneElement(NlpComponent, {
                                                        rowIndex: index,
                                                        rowData: row,
                                                    }) }))] }, row.stepId || index));
                                        const renderSortableRow = () => (_jsx(StepTableMainRow, { row: row, indexNumber: index, columns: columns, tableBodyRowClass: tableBodyRowClass, handleOnclick: handleOnclick, tableDataTextColor: tableDataTextColor, withCheckbox: withCheckbox, onSelectClick: onSelectClick, draggable: draggable, tableType: tableType, viewModeId: viewModeId, ViewComponent: ViewComponent, handleClick: handleClick, selectedRows: selectedRows, handleStepGroupExpand: handleStepGroupExpand, isStepGroupExpanded: isStepGroupExpanded, dataLength: data?.length, stepPartialSelect: stepPartialSelect, isViewPrivilegeMode: isViewPrivilegeMode, isClientSide: isClientSide }));
                                        return isEditOrNew
                                            ? renderEditableRow()
                                            : renderSortableRow();
                                    }), _jsx("tr", { id: "ff-table-last-node" })] })] }), data?.length <= 0 && (_jsx("div", { className: "steps-no-data-content", style: { height: `calc(${height} - 50px)` }, children: noDataContent }))] }) }) }));
};
export default StepInnerTable;
//# sourceMappingURL=StepInnerTable.js.map