import React, {
  HTMLProps,
  CSSProperties,
  forwardRef,
  FunctionComponent,
} from "react";
import classNames from "classnames";
import { bem } from "../../utilities/bem";
import { Flex } from "../Flex";
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;

  /**
   * Aligns the text content horizontally inside of the header; if the content
   * is more than just a string, then you'll need to handle alignment on your
   * own, i.e., flexbox.
   */
  align?: "left" | "center" | "right";

  /**
   * Optional forwarded ref
   */
  ref?: any;
}

const TableCell: FunctionComponent<TableCellProps> = forwardRef<
  HTMLTableCellElement,
  TableCellProps
>(
  (
    {
      className,
      removePadding = false,
      isLoading = false,
      children,
      columnWidth,
      align = "left",
      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" }),
          align && `text-${align}`,
          className,
        )}
        ref={ref}
        {...rest}
      >
        {isLoading ? (
          <Flex
            className="h-full items-center"
            data-testid="loading-cell-skeleton"
          >
            <Skeleton className="w-full" />
          </Flex>
        ) : (
          children
        )}
      </td>
    );
  },
);

export default TableCell;