import React from 'react';
import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';
import { Highlighter } from '@wix/design-system';
import { NestedTableFlatDataItem } from '../../state/NestedTableState/NestedTableFlatModeSectionState';
import { MainCellLayout } from './MainCellLayout';
import { TextBreadcrumbs } from '../TextBreadcrumbs';

export interface NestedTableFlatModeMainCellProps<
  C extends string,
  T,
  F extends FiltersMap,
> {
  rowNum: number;
  item: NestedTableFlatDataItem<C, T, F>;
}

function _NestedTableFlatModeMainCell<
  C extends string,
  T,
  F extends FiltersMap,
>(props: NestedTableFlatModeMainCellProps<C, T, F>) {
  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 (
    <MainCellLayout
      dataHook="flat-mode-main-cell"
      image={renderProps?.image}
      breadcrumbs={
        breadcrumbsItems && (
          <TextBreadcrumbs items={breadcrumbsItems} dataHook="breadcrumbs" />
        )
      }
      title={
        <Highlighter emphasize="background" match={state.query.search.value}>
          {renderProps?.title ?? collection.itemName(originalKeyedItem.item)}
        </Highlighter>
      }
      subtitle={renderProps?.subtitle}
      titleMaxWidth={titleMaxWidth}
    />
  );
}

export const NestedTableFlatModeMainCell = observer(
  _NestedTableFlatModeMainCell,
);