import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { memo, useRef, useEffect } from 'react';
import './StepInnerTable.scss';
import Typography from '../../Typography';
import Icon from '../../Icon';
const StepGroupAccordions = memo(({ data = [], level = 0, columnCount = 1, viewModeId, ViewComponent, handleClick, tableType, handleStepGroupExpand, isStepGroupExpanded, isViewPrivilegeMode, columns = [], parentIndex, updateRowHeight, }) => {
    const rowRefs = useRef([]);
    const typeSet = new Set(['group', 'pre', 'post', 'script']);
    const getPadding = (type, entityType) => typeSet.has(type?.toLowerCase()) || typeSet.has(entityType?.toLowerCase())
        ? '6px 8px'
        : '7px 8px';
    const indent = level + 8;
    const prepareData = (dataObj, columnObj, index, tableType) => {
        const cellData = dataObj[columnObj.accessor];
        if (columnObj.cell) {
            const refId = dataObj._id || dataObj.id;
            return columnObj.cell({
                value: cellData,
                row: dataObj,
                column: columnObj.accessor,
                index: index,
                tableType: tableType,
                ...(refId && { refId }),
            });
        }
        else if (columnObj.accessor) {
            return cellData;
        }
        else if (cellData && typeof cellData !== 'object') {
            return cellData;
        }
        else {
            return '--';
        }
    };
    // Measure and report height with ResizeObserver
    useEffect(() => {
        if (!updateRowHeight)
            return;
        const resizeObserver = new ResizeObserver(() => {
            let totalHeight = 0;
            rowRefs.current.forEach((ref) => {
                if (ref) {
                    totalHeight += ref.getBoundingClientRect().height;
                }
            });
            if (totalHeight > 0) {
                updateRowHeight(parentIndex ?? 0, totalHeight);
            }
        });
        rowRefs.current.forEach((ref) => {
            if (ref)
                resizeObserver.observe(ref);
        });
        return () => resizeObserver.disconnect();
    }, [data, updateRowHeight, parentIndex, isStepGroupExpanded]);
    return (_jsx(_Fragment, { children: data?.map((item, itemIndex) => {
            const absoluteIndex = parentIndex ?? 0 + itemIndex + 1;
            const showAccordion = typeSet.has(item?.entityType?.toLowerCase()) ||
                typeSet.has(item?.type?.toLowerCase());
            return (_jsxs(React.Fragment, { children: [viewModeId === item?.stepId ? (_jsx("tr", { ref: (el) => (rowRefs.current[itemIndex] = el), className: "steps-edit-row", id: "getInFocus", children: _jsx("td", { colSpan: columnCount, children: _jsx("div", { style: { marginLeft: `${indent}px` }, children: ViewComponent && _jsx(ViewComponent, {}) }) }) })) : (_jsx("tr", { ref: (el) => (rowRefs.current[itemIndex] = el), children: columns.map((col, idx) => (_jsx("td", { style: {
                                maxWidth: col.width,
                                padding: getPadding(item?.type, item?.entityType),
                            }, children: _jsxs(Typography, { as: "div", className: "ff-data-checkbox-container", children: [_jsxs("div", { className: "ff-data-checkbox-container-content", style: {
                                            marginLeft: idx === 0 ? `${indent}px` : 0,
                                        }, onClick: () => {
                                            const isClickable = idx === 0 &&
                                                !item?.displayName?.includes('End') &&
                                                !item?.isDisabled;
                                            if (isClickable)
                                                handleClick?.({ ...item, tableType });
                                        }, children: [!isViewPrivilegeMode && idx === 0 && (_jsx("div", { style: { padding: '4px 18px' } })), prepareData({ ...item, marginLeft: indent }, col)] }), idx === 0 && showAccordion && (_jsx("div", { className: `ff-accordion-arrow ${isStepGroupExpanded?.(item.stepId)
                                            ? 'expanded'
                                            : ''}`, children: _jsx(Icon, { name: "arrow_right", color: isStepGroupExpanded?.(item.stepId)
                                                ? 'var(--brand-color)'
                                                : 'var(--default-color)', className: "steps-arrow-svg", width: 12, height: 12, onClick: () => handleStepGroupExpand?.({
                                                ...item,
                                                tableType,
                                            }) }) }))] }) }, `${item.stepId}-${idx}`))) })), isStepGroupExpanded?.(item.stepId) && (_jsx(StepGroupAccordions, { data: item.data, level: indent, columnCount: columnCount, viewModeId: viewModeId, ViewComponent: ViewComponent, handleClick: handleClick, tableType: tableType, handleStepGroupExpand: handleStepGroupExpand, isStepGroupExpanded: isStepGroupExpanded, isViewPrivilegeMode: isViewPrivilegeMode, columns: columns, parentIndex: absoluteIndex, updateRowHeight: updateRowHeight }))] }, item.stepId));
        }) }));
});
StepGroupAccordions.displayName = 'StepGroupAccordions';
export default StepGroupAccordions;
//# sourceMappingURL=StepGroupAccordions.js.map