import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useSortable } from '@dnd-kit/sortable';
import classNames from 'classnames';
import { useMemo, memo } from 'react';
import { ffid } from '../../../utils/ffID/ffid';
import { prepareData } from '../../../utils/TableCell/TableCell';
import Checkbox from '../../Checkbox';
import Icon from '../../Icon';
import Typography from '../../Typography';
import StepGroupAccordions from './StepGroupAccordions';
import { CSS } from '@dnd-kit/utilities';
const StepTableMainRow = ({ row, columns, tableBodyRowClass, handleOnclick, tableDataTextColor, withCheckbox, onSelectClick, draggable, indexNumber = 0, tableType = '', viewModeId, ViewComponent, handleClick, selectedRows, handleStepGroupExpand, isStepGroupExpanded, dataLength, stepPartialSelect, isViewPrivilegeMode, isClientSide, }) => {
    const isDisabled = useMemo(() => row?.isDisabled || (dataLength ?? 0) <= 1 || row.isSpecialNlp, [row, dataLength]);
    let serialNumber = (indexNumber + 1).toString();
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
        id: row?._id || row?.stepId,
        disabled: isDisabled,
    });
    const style = useMemo(() => ({
        transform: CSS.Transform.toString(transform),
        transition,
    }), [transform, transition]);
    const key = row?._id || row?.stepId;
    const getPadding = (index) => {
        if (isViewPrivilegeMode || isClientSide) {
            if (['Group', 'PRE', 'POST', 'Script'].includes(row.type) &&
                index === 0) {
                return '4px 8px';
            }
            return '7px 8px';
        }
        if (index !== 0) {
            return tableType === 'Steps' ? '4px 8px' : '7px 8px';
        }
        if (tableType === 'Steps') {
            return draggable ? '4px 8px 4px 0px' : '4px 8px 4px 24px';
        }
        return '4px 8px 4px 24px';
    };
    const renderDragHandle = () => (_jsx("div", { className: isDisabled ? 'ff-table-drag' : 'ff-table-drag-icon', ...listeners, ...attributes, children: _jsx(Icon, { name: "drag", className: isDisabled ? 'drag-icon-disabled' : 'drag-icon' }) }));
    const renderCheckbox = () => (_jsx("span", { className: (tableType && selectedRows[tableType]?.has(row.stepId)) ||
            stepPartialSelect?.has(row.stepId)
            ? ''
            : 'ff-table-checkbox', children: _jsx(Checkbox, { onChange: (e) => onSelectClick(tableType, row, e.target.checked), checked: !!selectedRows[tableType]?.has(row.stepId), partial: stepPartialSelect?.has(row.stepId), disabled: row?.isSpecialNlp && row?.name?.includes('End') }) }));
    const renderGroupToggle = () => (_jsx("div", { className: `ff-accordion-arrow ${isStepGroupExpanded?.(row?.stepId) ? 'expanded' : ''}`, children: _jsx(Icon, { name: "arrow_right", className: "steps-arrow-svg", color: isStepGroupExpanded?.(row?.stepId)
                ? 'var(--brand-color)'
                : 'var(--default-color)', width: 12, height: 12, onClick: () => handleStepGroupExpand?.({ ...row, tableType, serialNumber }) }) }));
    return (_jsxs(_Fragment, { children: [_jsx("tr", { ref: setNodeRef, style: style, className: classNames(tableBodyRowClass, {
                    'disabled-inner-row': isDisabled,
                }), id: key, children: columns?.map((column, index) => {
                    return (_jsx(_Fragment, { children: _jsx("td", { style: {
                                padding: getPadding(index),
                                maxWidth: column.width,
                            }, onClick: () => handleOnclick(column, row, indexNumber), children: _jsxs(Typography, { as: "div", color: tableDataTextColor, className: "ff-data-checkbox-container", children: [index === 0 &&
                                        !isClientSide &&
                                        draggable &&
                                        renderDragHandle(), index === 0 &&
                                        !isClientSide &&
                                        withCheckbox &&
                                        renderCheckbox(), _jsxs("div", { className: "ff-margin-container", style: {
                                            marginLeft: index === 0 ? row.marginLeft : 0,
                                        }, children: [prepareData(row, column, indexNumber, tableType), ['Group', 'PRE', 'POST', 'Script'].includes(row.type) &&
                                                index === 0 &&
                                                !isClientSide &&
                                                renderGroupToggle(), column.extraInfo?.({ row, indexNumber, tableType })] })] }) }, `${column.accessor}-${ffid()}`) }));
                }) }, key), isStepGroupExpanded?.(row?.stepId) && (_jsx(StepGroupAccordions, { data: row.data || row?.stepResults, columnCount: columns.length, viewModeId: viewModeId, ViewComponent: ViewComponent, handleClick: handleClick, tableType: tableType, handleStepGroupExpand: handleStepGroupExpand, isStepGroupExpanded: isStepGroupExpanded, level: row?.marginLeft, isViewPrivilegeMode: isViewPrivilegeMode, columns: columns }))] }));
};
export default memo(StepTableMainRow);
//# sourceMappingURL=StepTableMainRow.js.map