import * as React from 'react';

import type { TableRowType } from '../types';

export interface TableRowProps {
  /**
   * `alert` | `attention` | `error` | `muted` | `success` or an array of these types.
   */
  type?: TableRowType | TableRowType[];
  /**
   * Whether the row is being dragged (styling only)
   */
  dragging?: boolean;
  /**
   * Whether the row looks disabled
   */
  disabled?: boolean;
  children?: React.ReactNode;
}

export const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(
  { type, children, dragging, disabled, ...props }: TableRowProps,
  ref
) {
  let classNamesFromType = '';
  if (Array.isArray(type)) {
    classNamesFromType = type.map(type => `table__row--${type}`).join(' ');
  } else if (type) {
    classNamesFromType = `table__row--${type}`;
  }
  if (dragging) {
    classNamesFromType += ' table__row--dragging';
  }
  if (disabled) {
    classNamesFromType += ' table__row--hidden';
  }
  return (
    <tr className={classNamesFromType} ref={ref} {...props}>
      {children}
    </tr>
  );
});