import classNames from "classnames";
import * as React from "react";
import { HTML_TABLE, HTML_TABLE_BORDERED, HTML_TABLE_BORDER, HTML_TABLE_STRIPED, INTERACTIVE, SMALL } from "../../common/classes";
import { IElementRefProps } from "../html/html";

export interface IHTMLTableProps extends React.HTMLAttributes<HTMLTableElement>, IElementRefProps<HTMLTableElement> {
    /** Enables borders between rows and cells. */
    bordered?: boolean;

    /** Enables table borders. */
    border?: boolean;

    /** Enables hover styles on row. */
    interactive?: boolean;

    /** Use small, condensed appearance. */
    small?: boolean;

    /** Use an alternate background color on odd rows. */
    striped?: boolean;
}

// this component is simple enough that tests would be purely tautological.
/* istanbul ignore next */
export class HTMLTable extends React.PureComponent<IHTMLTableProps> {
    public render() {
        const { bordered, border, className, elementRef, interactive, small, striped, ...htmlProps } = this.props;
        const classes = classNames(
            HTML_TABLE,
            {
                [HTML_TABLE_BORDERED]: bordered,
                [HTML_TABLE_STRIPED]: striped,
                [INTERACTIVE]: interactive,
                [SMALL]: small,
                [HTML_TABLE_BORDER]: border,
            },
            className,
        );
        // tslint:disable-next-line:blueprint-html-components
        return <table {...htmlProps} ref={elementRef} className={classes} />;
    }
}