import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { memo } from 'react';
import Icon from '../../Icon';
import Typography from '../../Typography';
import { prepareData } from '../../../utils/TableCell/TableCell';
import './StepInnerTable.scss';
const StepGroupAccordions = memo(({ data = [], level = 0, columnCount = 1, viewModeId, ViewComponent, handleClick, tableType, handleStepGroupExpand, isStepGroupExpanded, isViewPrivilegeMode, columns = [], }) => {
    const typeSet = new Set(['Group', 'PRE', 'POST', 'Script']);
    const getPadding = (type) => typeSet.has(type) ? '6px 8px' : '7px 8px';
    const indent = level + 8;
    return (_jsx(_Fragment, { children: data?.map((item) => (_jsxs(React.Fragment, { children: [viewModeId === item?.stepId ? (_jsx("tr", { className: "steps-edit-row", id: "getInFocus", children: _jsx("td", { colSpan: columnCount, children: _jsx("div", { style: { marginLeft: `${indent}px` }, children: ViewComponent && _jsx(ViewComponent, {}) }) }) })) : (_jsx("tr", { children: columns.map((col, idx) => (_jsx("td", { style: {
                            maxWidth: col.width,
                            padding: getPadding(item.type),
                        }, 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 &&
                                    ['Group', 'PRE', 'POST', 'Script'].includes(item.type) && (_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 }))] }, item.stepId))) }));
});
StepGroupAccordions.displayName = 'StepGroupAccordions';
export default StepGroupAccordions;
//# sourceMappingURL=StepGroupAccordions.js.map