import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { useCallback, Fragment as Fragment$1 } from 'react';
import Icon from '../../Icon/Icon.js';
import Typography from '../../Typography/Typography.js';
import { truncateText } from '../../../utils/truncateText/truncateText.js';
import Tooltip from '../../Tooltip/Tooltip.js';

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$1, { 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 { PrePostStepAccordions as default };
//# sourceMappingURL=PrePostStepAccordions.js.map
