import React, { Component } from "react";
import Cell from "./Cell";
import { Table } from "react-bootstrap";
import { tableVariant } from "../../constants/variables";

// Component Props
export interface EfeBasicTableProps {
  headings: any;
  dataArray: any;
  variant?: string;
  striped?: boolean;
  bordered?: boolean;
  hover?: boolean;
}

export default class EfeBasicTable extends Component<EfeBasicTableProps, any> {
  render() {
    const { headings, dataArray, variant } = this.props;
    this._renderHeadingRow = this._renderHeadingRow.bind(this);
    this._renderRow = this._renderRow.bind(this);

    const theadMarkup = (
      <tr key="heading">{headings.map(this._renderHeadingRow)}</tr>
    );

    const tbodyMarkup = dataArray.map(this._renderRow);

    return (
      <Table {...this.props} variant={variant}>
        <thead>{theadMarkup}</thead>
        <tbody>{tbodyMarkup}</tbody>
      </Table>
    );
  }

  /* Component Functions
   * ------------------------------------------------ */

  _renderHeadingRow = (_cell: any, cellIndex: number) => {
    const { headings } = this.props;

    return (
      <Cell
        key={`heading-${cellIndex}`}
        content={headings[cellIndex]}
        header={true}
      />
    );
  };

  _renderRow = (_row: any, rowIndex: number) => {
    const { dataArray } = this.props;

    return (
      <tr key={`row-${rowIndex}`}>
        {dataArray[rowIndex].map((_cell: any, cellIndex: number) => {
          return (
            <Cell
              key={`${rowIndex}-${cellIndex}`}
              content={dataArray[rowIndex][cellIndex]}
              header={false}
            />
          );
        })}
      </tr>
    );
  };
}
