import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import React from 'react';
import { Table as ReactableTable, Tr, Td } from 'reactable';
import Icon from '../Icon'; // TODO move to sepeate file..

var TableHeader = function TableHeader(_ref) {
  var title = _ref.title,
      onFilter = _ref.onFilter,
      showFilter = _ref.showFilter;
  return React.createElement("div", {
    className: 'row reactable-title'
  }, React.createElement("div", {
    className: 'col-xs-12 col-sm-6'
  }, React.createElement("h2", null, title)), showFilter && React.createElement("div", {
    className: 'col-xs-12 col-sm-6'
  }, React.createElement("div", {
    className: 'form-group has-feedback'
  }, React.createElement("input", {
    className: 'form-control',
    placeholder: 'Search',
    onInput: onFilter
  }), React.createElement("span", {
    className: 'ca-gov-icon-search-right form-control-feedback'
  }))));
};

var Table =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Table, _React$Component);

  function Table() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, Table);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Table)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.state = {
      filter: ''
    };

    _this.filterRows = function (event) {
      _this.setState({
        filter: event.target.value
      });
    };

    _this.getFilterable = function () {
      var _this$props = _this.props,
          toFilter = _this$props.toFilter,
          headers = _this$props.headers;

      if (toFilter) {
        return toFilter;
      } // default to using all headers


      return Object.values(headers);
    };

    _this.buildTableProps = function () {
      var _this$props2 = _this.props,
          title = _this$props2.title,
          data = _this$props2.data;
      var filter = _this.state.filter;
      var itemsPerPage = data.length > 15 ? 15 : 0;

      var filterable = _this.getFilterable();

      var tableProps = {
        itemsPerPage: itemsPerPage,
        className: 'table table-condensed table-hover st-table',
        previousPageLabel: React.createElement(Icon, {
          name: 'caret-two-left'
        }),
        nextPageLabel: React.createElement(Icon, {
          name: 'caret-two-right'
        }),
        noDataText: "No ".concat(title),
        hideFilterInput: true,
        filterBy: filter,
        filterable: filterable,
        sortable: filterable,
        defaultSort: null
      };
      return tableProps;
    };

    _this.handleClickRow = function (row) {
      return function () {
        var onClickRow = _this.props.onClickRow;

        if (onClickRow) {
          onClickRow(row);
        }
      };
    };

    return _this;
  }

  _createClass(Table, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props3 = this.props,
          title = _this$props3.title,
          data = _this$props3.data,
          headers = _this$props3.headers;
      var tableProps = this.buildTableProps();
      return React.createElement("div", {
        className: 'row'
      }, React.createElement("div", {
        className: 'col-xs-12'
      }, React.createElement(TableHeader, {
        title: title,
        onFilter: this.filterRows,
        showFilter: data.length
      }), React.createElement(ReactableTable, tableProps, data.map(function (row) {
        return React.createElement(Tr, {
          key: row.id,
          onClick: _this2.handleClickRow(row)
        }, Object.keys(row).map(function (col) {
          var header = headers[col];

          if (!header) {
            return null;
          }

          return React.createElement(Td, {
            column: headers[col],
            key: "".concat(row.id, "-").concat(col)
          }, row[col]);
        }));
      }))));
    }
  }]);

  return Table;
}(React.Component);

export default Table;