import * as React from "react";
import Header from "../Header";
import Search from "../Search";
import TableContent from "../TableContent";
import "./style.css";

export interface TableProps {
  headerProps,
  rowsData,
  isLoading: boolean,
  textSearch,
  filterData,
  filters,
  removeFilter,
  sortBy,
  sortDirection,
  handleSorting,
  exportCSV,
  exportPDF,
  deleteAudits,
  stats
  hideStatistics?: boolean,
}
export class Table extends React.Component<TableProps, {}> {
  state = {
    rowsData: [],
    headerProps: []
  };

  componentDidMount() {
    const { headerProps, rowsData } = this.props;
    this.setState({ rowsData, headerProps });
  }

  static getDerivedStateFromProps(props, state) {
    const { headerProps, rowsData } = props;
    return {
      rowsData,
      headerProps
    };
  }

  render() {
    const { rowsData, headerProps } = this.state;
    const {
      isLoading,
      textSearch,
      filterData,
      filters,
      removeFilter,
      sortBy,
      sortDirection,
      handleSorting,
      exportCSV,
      exportPDF,
      deleteAudits,
      stats,
      hideStatistics
    } = this.props;
    return (
      <div className="fe-audits-container">
        {!hideStatistics && <Header
          updateStatus="Last updated 4 minutes ago"
          days={stats && stats.totalToday}
          daysLine="Total Today"
          weeks={stats && stats.severeThisWeek}
          weekLine="Severe This Week"
        />}
        <Search
          textSearch={textSearch}
          filters={filters}
          removeFilter={removeFilter}
          exportCSV={exportCSV}
          exportPDF={exportPDF}
          deleteAudits={deleteAudits}
          filterData={filterData}
        />
        <TableContent
          rowsData={rowsData}
          headerProps={headerProps}
          isLoading={isLoading}
          filterData={filterData}
          sortDirection={sortDirection}
          sortBy={sortBy}
          handleSorting={handleSorting}
        />
      </div>
    );
  }
}
