import React from "react";
import classNames from "classnames";
import TableBody from "./TableBody";
import TableCell from "./TableCell";
import TableHead from "./TableHead";
import TableHeaderCell from "./TableHeaderCell";
import TableRow from "./TableRow";
import TableContext, { SORT_DIRECTION } from "./TableContext";
import { bem } from "../../utilities/bem";

const cn = "Table";
const wrapperCn = "TableWrapper";

interface TableProps extends React.HTMLProps<HTMLTableElement> {
  /**
   * Callback for when the sort button is clicked in a given column
   */
  onSort?(columnId: string): void;
  /**
   * Adds a border to the left/right of the table
   */
  outerBorder?: boolean;
  /**
   * Sets the icon direction on the sort buttons in the TableHeaderCell
   */
  sortDirection?: SORT_DIRECTION;
  /**
   * Used to determine which column will get the active sort icon
   */
  sortColumnId?: string;
  /**
   * Affixes the header to the top of the container when scrolling
   */
  affixHeader?: boolean;
  /**
   * Removes the spacer column on the left side of the Table
   *
   * Deprecated
   */
  removeSpacerColumn?: boolean;
  /**
   * If true, a "No Results" message will display in place of the table body
   */
  noResults?: boolean;
  /**
   * Is this table rendered in a modal?
   */
  renderInModal?: boolean;
  /**
   * Allow this table to scroll horizontally. Note you'll likely need min-width
   * columns for this to take effect.
   *
   * Deprecated
   */
  enableHorizontalScroll?: boolean;
  /**
   * When scrolling horizontally, should the first, non-spacer, column stick?
   */
  stickyColumn?: boolean;
  /**
   * Does the table have batch / bulk actions?
   */
  hasBatchActions?: boolean;
}

const Table = ({
  children,
  className,
  onSort = () => {},
  outerBorder = false,
  sortColumnId,
  sortDirection,
  affixHeader = false,
  removeSpacerColumn = false, // Deprecated
  noResults = false,
  renderInModal = false,
  enableHorizontalScroll = false, // Deprecated
  stickyColumn = false,
  hasBatchActions = false,
  ...rest
}: TableProps) => {
  const wrapperClasses = classNames(
    bem(wrapperCn),
    enableHorizontalScroll && bem(wrapperCn, { m: "enable-hscroll" }),
  );

  const classes = classNames(
    bem(cn),
    removeSpacerColumn && bem(cn, { m: "remove-spacer" }),
    outerBorder && bem(cn, { m: "outer-border" }),
    affixHeader && bem(cn, { m: "affix-header" }),
    noResults && bem(cn, { m: "no-results" }),
    stickyColumn && bem(cn, { m: "sticky-column" }),
    hasBatchActions && bem(cn, { m: "batch-actions" }),
    className,
  );

  return (
    <TableContext.Provider
      value={{
        handleSort: onSort,
        sortDirection,
        sortColumnId,
        removeSpacerColumn,
        stickyColumn,
        noResults,
        renderInModal,
        hasBatchActions,
      }}
    >
      <div className={wrapperClasses}>
        <table className={classes} {...rest}>
          {children}
        </table>
      </div>
    </TableContext.Provider>
  );
};

Table.Body = TableBody;
Table.Row = TableRow;
Table.Cell = TableCell;
Table.Head = TableHead;
Table.HeaderCell = TableHeaderCell;

export { Table, SORT_DIRECTION };