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 { prepareData } from '../../../utils/TableCell/TableCell';
import Checkbox from '../../Checkbox';
import Icon from '../../Icon';
import Typography from '../../Typography';
import PrePostStepAccordions from './PrePostStepAccordions';
import { CSS } from '@dnd-kit/utilities';
import '../PrePostTable.scss';
const DraggableTableRow = ({ row, columns, tableBodyRowClass, handleOnclick, tableDataTextColor, withCheckbox, onSelectClick, draggable, indexNumber = 0, dataLength = 0, viewModeId, ViewComponent, handleClick, handleStepGroupExpand, isStepGroupExpanded, scriptType, }) => {
    const typeSet = new Set(['group', 'pre', 'post', 'script']);
    const showAccordion = typeSet.has(row?.entityType?.toLowerCase()) ||
        typeSet.has(row?.type?.toLowerCase());
    const isDisabled = row?.isDisabled;
    const rowId = row?._id || row?.stepId;
    const isPrePostTable = scriptType ? row.cascaded === 'cascaded' : false;
    const isDragDisabled = isDisabled || dataLength <= 1 || isPrePostTable;
    let serialNumber = (indexNumber + 1).toString();
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
        id: rowId,
        disabled: isDragDisabled,
    });
    const style = useMemo(() => ({
        transform: CSS.Transform.toString(transform),
        transition,
    }), [transform, transition]);
    const expanded = isStepGroupExpanded?.(row.stepId);
    return (_jsxs(_Fragment, { children: [_jsx("tr", { ref: setNodeRef, style: style, className: classNames(tableBodyRowClass, {
                    'disabled-row': isDisabled,
                }), children: columns.map((column, index) => {
                    const firstColumn = index === 0;
                    return (_jsx("td", { style: { paddingLeft: firstColumn && draggable ? '0px' : '8px' }, onClick: () => handleOnclick(column, row, index), className: classNames(column.className, {
                            'clickable-cell': column.onClick,
                        }), children: _jsxs(Typography, { as: "div", color: tableDataTextColor, className: "ff-data-checkbox-container", children: [firstColumn && withCheckbox && (_jsx("span", { className: "ff-table-pre-post-checkbox", children: _jsx(Checkbox, { onChange: (e) => onSelectClick(e, row), checked: row.checked, disabled: !!isDisabled }) })), firstColumn && draggable && (_jsx("div", { className: isDisabled ? 'ff-table-drag' : 'ff-table-drag-icon', ...listeners, ...attributes, children: _jsx(Icon, { name: "drag", className: isDragDisabled ? 'drag-icon-disabled' : 'drag-icon' }) })), prepareData(row, column, indexNumber), firstColumn && showAccordion && (_jsx("div", { className: `pre-accordion-arrow ${expanded ? 'expanded' : ''}`, children: _jsx(Icon, { name: "arrow_right", color: expanded ? 'var(--brand-color)' : 'var(--default-color)', width: 12, height: 12, className: "pre-arrow-svg", onClick: () => {
                                            handleStepGroupExpand?.({ ...row, serialNumber });
                                        } }) })), column.extraInfo && column.extraInfo({ row, indexNumber })] }) }, `${column.accessor}${index}`));
                }) }, rowId), expanded && (_jsx(PrePostStepAccordions, { data: row.data, columnCount: columns.length, viewModeId: viewModeId, ViewComponent: ViewComponent, handleClick: handleClick, handleStepGroupExpand: handleStepGroupExpand, isStepGroupExpanded: isStepGroupExpanded }))] }));
};
export default memo(DraggableTableRow);
//# sourceMappingURL=DraggableTableRow.js.map