import { observer } from 'mobx-react-lite';
import React, { forwardRef, useEffect, useState, } from 'react';
import { classes, st } from './NestedTableRow.st.css.js';
import { Table } from '@wix/design-system';
const _NestedTableRow = forwardRef((props, ref) => {
    const { children, item, className, rowData, dragAndDrop, ...rest } = props;
    const [itemState] = useState(() => {
        return item.state.createNode({
            parent: item.originalKeyedItem,
        });
    });
    useEffect(() => itemState?.init(), []);
    const { st: dataTableRowSt, classes: dataTableRowClasses } = Table.dataTableRowStyle;
    const expandable = itemState != null &&
        !itemState._isNotExpandableWhenEmpty &&
        !item.state._isExpandableActionDisabled(item.originalKeyedItem.item);
    const isRowHighlight = item.state.levelDescriptor.isRowHighlight?.(item.originalKeyedItem.item);
    const isSameEntityAsOtherLevels = itemState?.levelDescriptor.isSameEntityAsOtherLevels;
    let child = (React.createElement("tr", { ...(process.env.NODE_ENV !== 'production' && {
            'data-parent-key': item.state.parent?.key,
            'data-index-in-parent': item.originalKeyedItem.indexWithinPage,
        }), ...(process.env.NODE_ENV === 'test' && {
            'data-virtual-direct-children-count': item.state.collection.result.size,
            'data-level': item.state.childrenDepth,
            'data-indentation-width': item.state.nestedTable._indentationWidth,
        }), ref: ref, className: st(classes.root, {
            expandable,
        }, isRowHighlight ? dataTableRowClasses.dataTableHighlight : undefined, item.state.showHoverHighlight ? classes.parentHovered : undefined, item.state.childrenDepth === 0 && !isSameEntityAsOtherLevels
            ? classes.firstLevel
            : undefined, dataTableRowSt(dataTableRowClasses.root, {
            skin: item.state.childrenDepth === 0 && !isSameEntityAsOtherLevels
                ? 'neutral'
                : 'light',
        }), className), onMouseEnter: () => {
            itemState?._changeHover(true);
        }, onMouseLeave: () => {
            itemState?._changeHover(false);
        }, ...rest, onClick: (ev) => {
            rest?.onClick?.(ev);
            if (expandable) {
                itemState._toggleExpand();
                itemState.bi.reportExpandCollapse();
            }
        } }, children));
    if (dragAndDrop) {
        const { NestedTableDragAndDropRow } = dragAndDrop;
        child = (React.createElement(NestedTableDragAndDropRow, { item: item, forwardedRef: ref }, child));
    }
    return child;
});
export const NestedTableRow = observer(_NestedTableRow);
//# sourceMappingURL=NestedTableRow.js.map