import React from 'react';
import { Button, Glyphicon } from 'react-bootstrap';
import BootstrapTable2 from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import { LinkContainer } from 'react-router-bootstrap';
import styles from './ResponsiveTable.module.css';
import { getCurrentBreakpoint } from '../../helpers';

class ResponsiveTable extends React.Component {
  /**
   * This method will calculate the headerStyle based on the ResponsiveHeaderStyle and the size of the window
   * @param {array} columns BootstrapTable2 columns
   */
  configure(columns) {
    const size = getCurrentBreakpoint();

    return columns.map((column) =>
      column.responsiveHeaderStyle && column.responsiveHeaderStyle[size]
        ? {
            ...column,
            headerStyle: column.responsiveHeaderStyle[size],
            hidden: column.responsiveHeaderStyle[size].hidden,
          }
        : column
    );
  }

  renderActionButton(btnProps) {
    const { label, icon, ...otherProps } = btnProps;
    return (
      <Button key={label} {...otherProps}>
        {icon && <Glyphicon className={styles.actionIcon} glyph={icon} />}
        {label}
      </Button>
    );
  }

  render() {
    const { SearchBar } = Search;

    function onColumnMatch({ searchText, value, column, row }) {
      if (column.onMatch) {
        return column.onMatch(searchText, value, row, column.formatExtraData);
      }

      return (
        value !== null &&
        value !== undefined &&
        value.toString().toLowerCase().includes(searchText)
      );
    }

    return (
      <ToolkitProvider
        keyField={this.props.keyField || 'id'}
        data={this.props.data}
        columns={this.configure(this.props.columns)}
        search={{ onColumnMatch, ...this.props.search }}
        expandRow={this.props.expandRow}
      >
        {({ baseProps, searchProps }) => (
          <>
            <div className={styles.bar}>
              <div className={styles.actions}>
                {(this.props.actions || []).map((action) => {
                  const { href, ...btnProps } = action;
                  if (!href) {
                    return this.renderActionButton(btnProps);
                  }
                  return (
                    <LinkContainer key={btnProps.label} to={action.href}>
                      {this.renderActionButton(btnProps)}
                    </LinkContainer>
                  );
                })}
              </div>
              <div className={styles.search}>
                <SearchBar
                  searchText={searchProps.searchText}
                  onSearch={(query) => {
                    if (this.props.onSearch) {
                      this.props.onSearch(query);
                    }
                    searchProps.onSearch(query);
                  }}
                />
              </div>
            </div>
            <BootstrapTable2
              striped
              hover
              condensed
              defaultSorted={this.props.defaultSorted}
              selectRow={this.props.selectRow}
              expandRow={this.props.expandRow}
              pagination={paginationFactory(this.props.pageOptions)}
              rowEvents={this.props.rowEvents}
              rowClasses={this.props.rowClasses}
              noDataIndication="This is no data to display"
              {...baseProps}
            />
          </>
        )}
      </ToolkitProvider>
    );
  }
}

export default ResponsiveTable;
