import React, { memo } from 'react';
import { useVirtualGridRepeaterContext } from './VirtualGridRepeaterContext';
import { VirtualItemProps } from './VirtualItem';
import { VirtualInternalMemoItem } from './VirtualInternalMemoItem';
import { areEqual } from 'react-window';

function _VirtualTableRow(props: VirtualItemProps) {
  const {
    columnIndex,
    rowIndex,
    style: { width, ...style },
  } = props;

  const { state, renderItem, itemKey } = useVirtualGridRepeaterContext();

  const {
    calcGridProps: { columnCount },
  } = state;

  const index = rowIndex * columnCount + columnIndex;

  return (
    <VirtualInternalMemoItem
      index={index}
      rowIndex={rowIndex}
      columnIndex={columnIndex}
      renderItem={renderItem}
      itemKey={itemKey}
      state={state}
      style={style}
    />
  );
}

export const VirtualTableRow = memo(_VirtualTableRow, areEqual);