import React from 'react';
import { observer } from 'mobx-react-lite';
import { Highlighter } from '@wix/design-system';
import { MainCellLayout } from './MainCellLayout';
import { TextBreadcrumbs } from '../TextBreadcrumbs';
function _NestedTableFlatModeMainCell(props) {
    const { item } = props;
    const { state } = item;
    const { collection } = state;
    const { originalKeyedItem } = item;
    const renderProps = state.renderMainColumn?.(originalKeyedItem.item);
    const breadcrumbsItems = state.breadcrumbs?.(originalKeyedItem.item);
    // leave at least 30px for shrinkable breadcrumbs items
    const titleMaxWidth = breadcrumbsItems
        ? `calc(100% - ${breadcrumbsItems.length * 30}px)`
        : undefined;
    return (React.createElement(MainCellLayout, { dataHook: "flat-mode-main-cell", image: renderProps?.image, breadcrumbs: breadcrumbsItems && (React.createElement(TextBreadcrumbs, { items: breadcrumbsItems, dataHook: "breadcrumbs" })), title: React.createElement(Highlighter, { emphasize: "background", match: state.query.search.value }, renderProps?.title ?? collection.itemName(originalKeyedItem.item)), subtitle: renderProps?.subtitle, titleMaxWidth: titleMaxWidth }));
}
export const NestedTableFlatModeMainCell = observer(_NestedTableFlatModeMainCell);
//# sourceMappingURL=NestedTableFlatModeMainCell.js.map