import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { Box, TextButton } from '@wix/design-system';
import { ChevronRightSmall } from '@wix/wix-ui-icons-common';
import { Rotate } from '../Rotate';
import { MainCellLayout } from './MainCellLayout';
function _NestedTableParentCell(props) {
    const { state: parentState, item, rowNum, dragAndDrop } = props;
    const { node: { collection }, } = parentState;
    const { originalKeyedItem, state: { nestedTable }, } = item;
    const renderProps = parentState.renderMainColumn?.(originalKeyedItem.item);
    const [state] = useState(() => item.state.createNode({
        parent: originalKeyedItem,
    }));
    useEffect(() => {
        if (!state) {
            return;
        }
        state._rowNum = rowNum;
    }, [rowNum]);
    const _expanded = state?._expanded;
    return (React.createElement("div", { "data-hook": "indentation-wrapper", ...(process.env.NODE_ENV === 'test' && {
            'data-indentation-width': nestedTable._indentationWidth,
        }), style: {
            display: 'flex',
            minWidth: 0,
            paddingInlineStart: parentState.childrenDepth * nestedTable._indentationWidth,
        } },
        React.createElement(MainCellLayout, { dragHandle: dragAndDrop?.NestedTableDragHandle && (React.createElement(dragAndDrop.NestedTableDragHandle, { item: item })), expandCollapseButton: React.createElement(Box, { paddingInlineEnd: "12px", visibility: state == null ||
                    state._isNotExpandableWhenEmpty ||
                    parentState._isExpandableActionDisabled(originalKeyedItem.item)
                    ? 'hidden'
                    : undefined, dataHook: "expand-collapse-wrapper" },
                React.createElement(TextButton, { size: "small", dataHook: "expand-collapse", prefixIcon: React.createElement(Rotate, { timeout: 200, deg: _expanded ? 90 : 0 },
                        React.createElement(ChevronRightSmall, { "data-hook": "chevron-icon", style: { paddingRight: 0, paddingInlineEnd: 0 } })) })), image: renderProps?.image, title: renderProps?.title ?? collection.itemName(originalKeyedItem.item), subtitle: renderProps?.subtitle })));
}
export const NestedTableParentCell = observer(_NestedTableParentCell);
//# sourceMappingURL=NestedTableParentCell.js.map