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

const cn = "SimpleTable";

export interface SimpleTableCellProps extends HTMLProps<HTMLTableCellElement> {
  wrapText?: boolean;
}

const SimpleTable = (props: HTMLProps<HTMLTableElement>) => {
  const { className, ...rest } = props;

  return <table className={classNames(bem(cn), className)} {...rest} />;
};

const SimpleTableRow = ({
  className,
  ...rest
}: HTMLProps<HTMLTableRowElement>) => {
  const classes = classNames(bem(cn, { e: "row" }), className);
  return <tr className={classes} {...rest} />;
};

const SimpleTableHead = ({
  className,
  ...rest
}: HTMLProps<HTMLTableSectionElement>) => {
  const classes = classNames(bem(cn, { e: "head" }), className);
  return <thead className={classes} {...rest} />;
};

const SimpleTableBody = ({
  className,
  ...rest
}: HTMLProps<HTMLTableSectionElement>) => {
  const classes = classNames(bem(cn, { e: "body" }), className);
  return <tbody className={classes} {...rest} />;
};

const SimpleTableCell = ({
  className,
  wrapText = false,
  ...rest
}: SimpleTableCellProps) => {
  const classes = classNames(
    bem(cn, { e: "cell" }),
    wrapText && bem(cn, { e: "cell", m: "wrapText" }),
    className,
  );
  return <td className={classes} {...rest} />;
};

const SimpleTableHeaderCell = ({
  className,
  ...rest
}: HTMLProps<HTMLTableCellElement>) => {
  const classes = classNames(bem(cn, { e: "header-cell" }), className);
  return <th className={classes} {...rest} />;
};

const SimpleTableCaption = ({
  className,
  ...rest
}: HTMLProps<HTMLTableCaptionElement>) => {
  const classes = classNames(bem(cn, { e: "caption" }), className);
  return <caption className={classes} {...rest} />;
};

SimpleTable.Body = SimpleTableBody;
SimpleTable.Row = SimpleTableRow;
SimpleTable.Cell = SimpleTableCell;
SimpleTable.Head = SimpleTableHead;
SimpleTable.HeaderCell = SimpleTableHeaderCell;
SimpleTable.Caption = SimpleTableCaption;

export { SimpleTable };