import * as React from 'react';
import classNames from 'classnames';

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

export interface TableCellProps {
  /**
   * @param attention - Hightlights the cell with a background color
   * @param actions - Won't wrap on the next line
   * @param calloutActions - Won't wrap on the next line
   * @param massAction - Won't wrap on the next line
   * @param preview - Won't wrap on the next line
   * @param price - Won't wrap on the next line. Text aligned to the right.
   * @param priceSummary - Won't wrap on the next line. Font weight is set to bold. Text aligned to the right.
   * @param summary - Won't wrap on the next line. Font weight is set to bold.
   * @param balance - Font weight is set to bold. Text aligned to the right.
   * @param number - Text aligned to the right.
   * @param datetime - Text aligned to the right.
   * @param headline - Font weight is set to bold. Text aligned to the center.
   * @param image - Sets the cell width to 30px
   * @param imageBig - Sets the cell width to 170px beyond small screens
   * @param large - Sets the cell width 50% of the table width
   * @param medium - Sets the cell width 20% of the table width
   * @param small - Sets the cell width 10% of the table width
   * @param stickyStart - Makes the cell sticky to the left side of the table
   * @param stickyEnd - Makes the cell sticky to the right side of the table
   */
  type?: TableCellType | TableCellType[];
  /**
   * The content of the cell.
   */
  children?: React.ReactNode;
  /**
   * Number of columns the cell should span.
   * If not specified, defaults to 1.
   * Must be a positive integer.
   */
  colspan?: number;
  /**
   * Number of rows the cell should span.
   * If not specified, defaults to 1.
   * Must be a positive integer.
   */
  rowspan?: number;
}

export const TableCell: React.FC<TableCellProps> = ({ type, children, colspan, rowspan, ...rest }) => {
  colspan = typeof colspan === 'number' && colspan >= 1 ? colspan : undefined;
  rowspan = typeof rowspan === 'number' && rowspan >= 1 ? rowspan : undefined;

  const typeModifiers = React.useMemo(() => {
    const types: string[] = type ? (Array.isArray(type) ? [...type] : [type]) : [];

    if (types.includes('balance') && typeof children === 'number' && children < 0) {
      types.push('balanceNegative');
    }

    return types;
  }, [children, type]);

  return (
    <td
      className={classNames(typeModifiers.map(typeModifier => `table__cell--${typeModifier}`))}
      colSpan={colspan}
      rowSpan={rowspan}
      {...rest}
    >
      {type === 'calloutActions' ? <div className='table__hideOnMouseOut'>{children}</div> : children}
    </td>
  );
};