import React, { Component } from 'react';
import PropTypes from 'prop-types';
import PropFilter from './PropFilter';

class TableFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filters: []
    };
  }

  componentWillMount() {
    let { columns, changeFilters } = this.props;
    let res = this.addFilter(columns, changeFilters);
    this.setState({ filters: res });
  }

  componentWillReceiveProps(nextProps) {
    let { columns, changeFilters } = nextProps;
    let res = this.addFilter(columns, changeFilters);
    this.setState({ filters: res });
  }

  addFilter = (columns, changeFilters) => {
    let res = [];
    columns.map((e, index) => {
      res.push(<PropFilter key={index} changeFilters={this.props.changeFilters} {...e} />);
    });
    return res;
  };

  render() {
    return <ul className="amos-table-filter">{this.state.filters}</ul>;
  }
}

TableFilter.propTypes = {
  columns: PropTypes.array,
  changeFilters: PropTypes.func
};

export default TableFilter;
