import React, {
  HTMLProps,
  CSSProperties,
  forwardRef,
  FunctionComponent,
} from "react";
import classNames from "classnames";
import { bem } from "../../utilities/bem";
import { Skeleton } from "../Skeleton";

const cn = "TableCell";

export interface TableCellProps extends HTMLProps<HTMLTableCellElement> {
  /**
   * Removes all padding from the cell
   */
  removePadding?: boolean;

  /**
   * Displays a `Skeleton` component to indicate loading is in progress
   */
  isLoading?: boolean;

  /**
   * This will set the width for the entire column. Any valid CSS value for the `width`
   * property is acceptable (e.g. "100px", "20%", etc.)
   */
  columnWidth?: string;
  ref?: any;
}

const TableCell: FunctionComponent<TableCellProps> = forwardRef<
  HTMLTableCellElement,
  TableCellProps
>(
  (
    {
      className,
      removePadding = false,
      isLoading = false,
      children,
      columnWidth,
      style,
      ...rest
    },
    ref,
  ) => {
    const computedStyle: CSSProperties = { ...style };
    if (columnWidth) {
      computedStyle.width = columnWidth;
    }

    return (
      <td
        style={computedStyle}
        className={classNames(
          bem(cn),
          removePadding && bem(cn, { m: "removePadding" }),
          className,
        )}
        ref={ref}
        {...rest}
      >
        {isLoading ? <Skeleton /> : children}
      </td>
    );
  },
);

export default TableCell;