import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Fragment, useCallback } from 'react';
import Icon from '../../Icon';
import Typography from '../../Typography';
import { truncateText } from '../../../utils/truncateText/truncateText';
import Tooltip from '../../Tooltip';
const PrePostStepAccordions = ({ data, level = 0, columnCount = 1, viewModeId, ViewComponent, handleClick, handleStepGroupExpand, isStepGroupExpanded, }) => {
    const marginLeft = level === 0 ? 18 + 8 : level + 8;
    const typeSet = new Set(['group', 'pre', 'post', 'script']);
    const getPadding = useCallback((type, entityType) => typeSet.has(type?.toLowerCase()) || typeSet.has(entityType?.toLowerCase())
        ? '6px 8px'
        : '7px 8px', []);
    return (_jsx(_Fragment, { children: data?.map((item) => {
            const isInEditMode = viewModeId === item.stepId;
            const isExpanded = isStepGroupExpanded?.(item.stepId);
            const padding = getPadding(item.type, item?.entityType);
            const showAccordion = typeSet.has(item?.entityType?.toLowerCase()) ||
                typeSet.has(item?.type?.toLowerCase());
            return (_jsxs(Fragment, { children: [isInEditMode ? (_jsx("tr", { className: "pre-edit-row", id: "getInFocus", children: _jsx("td", { colSpan: columnCount, children: _jsx("div", { style: { marginLeft }, children: ViewComponent && _jsx(ViewComponent, {}) }) }) })) : (_jsx("tr", { children: _jsx("td", { colSpan: columnCount, style: { padding }, children: _jsxs("div", { style: {
                                    marginLeft,
                                    display: 'flex',
                                    alignItems: 'center',
                                }, children: [_jsx(Tooltip, { title: item?.name, children: _jsxs(Typography, { as: "div", color: "var(--brand-color)", lineHeight: "18px", onClick: () => handleClick?.(item), children: [item.displayOrder, ".", truncateText(item.name, 40)] }) }), showAccordion && (_jsx("div", { className: `pre-accordion-arrow ${isExpanded ? 'expanded' : ''}`, children: _jsx(Icon, { name: "arrow_right", className: "pre-arrow-svg", color: isExpanded
                                                ? 'var(--brand-color)'
                                                : 'var(--default-color)', width: 12, height: 12, onClick: () => handleStepGroupExpand?.(item) }) }))] }) }) })), isExpanded && (_jsx(PrePostStepAccordions, { data: item.data, level: marginLeft, columnCount: columnCount, viewModeId: viewModeId, handleClick: handleClick, ViewComponent: ViewComponent, handleStepGroupExpand: handleStepGroupExpand, isStepGroupExpanded: isStepGroupExpanded }))] }, item.stepId));
        }) }));
};
export default PrePostStepAccordions;
//# sourceMappingURL=PrePostStepAccordions.js.map