import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import Typography from '../../Typography';
import Icon from '../../Icon';
import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
import './StepGroupDetailView.scss';
const StepGroupDetailView = ({ rowData, toggleViewRow, }) => {
    const convertToSentenceCase = (str) => str
        .toLowerCase()
        .replace(/_/g, ' ')
        .replace(/^./, (c) => c.toUpperCase());
    return (_jsxs("section", { className: "ff-view-step-group", children: [_jsxs("header", { className: "ff-view-step-group__header", children: [_jsxs("div", { className: "ff-view-step-group__header_info", children: [_jsxs(Typography, { as: "span", lineHeight: "18px", color: "var(--nlp-color)", children: [rowData.displayOrder, ".", rowData.name] }), _jsx(Typography, { as: "div", children: _jsx(Icon, { name: "help_icon", height: 16, width: 16 }) })] }), _jsxs("div", { className: "ff-view-step-group__header_link", children: [_jsx(Typography, { color: "var(--nlp-color)", lineHeight: "18px", fontWeight: "semi-bold", style: { textDecoration: 'underline' }, children: "Open step group" }), _jsx(Icon, { name: "vertical_separator", color: "var(--vertical-separate-color)", width: 11, height: 16, className: "ff-view-step-group__header-right__line" }), _jsx(Icon, { name: "close", hoverEffect: true, onClick: () => toggleViewRow(null) })] })] }), _jsx("article", { className: "ff-view-step-group__content", children: !checkEmpty(rowData.stepInputs) &&
                    rowData.stepInputs.map((item, index) => (_jsxs("div", { className: "ff-view-step-group__content__item", children: [_jsx(Typography, { as: "div", fontWeight: "medium", color: "var(--text-color)", lineHeight: "18px", children: item?.name }), _jsx(Typography, { as: "div", color: "var(--dataset-tooltip-title)", lineHeight: "18px", children: item?.value.includes('_')
                                    ? convertToSentenceCase(item.value)
                                    : item.value })] }, index))) })] }));
};
export default StepGroupDetailView;
//# sourceMappingURL=StepGroupDetailView.js.map