import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import TransitionGroup from 'react-transition-group/TransitionGroup';
import InfiniteScroll from 'react-infinite-scroller';
import TenderCardHH from '../components/TenderCardHH';
import FadeAndSlideTransition from 'hocs/animations/FadeAndSlideTransition';
import { fetchTenders } from 'actions/tender-list';

class TenderList extends Component {
  constructor(props) {
    super(props);
    this.renderList = this.renderList.bind(this);
  }

  componentDidMount() {
    this.props.fetchTenders();
  }
  componentWillReceiveProps() {
    console.log(1);
  }
  renderList({ children }) {
    return <ul className="tender-card__list">{children}</ul>;
  }
  render() {
    const { tenders, isLoadingInitial, renderList } = this.props;
    return (
      <div>
        {isLoadingInitial ? (
          <InfiniteScroll
            loadMore={this.props.fetchTenders}
            hasMore={true || false}
            loader={<div className="loader">Loading ...</div>}
          >
            <TransitionGroup component={renderList}>
              {tenders.map((tender, index) => {
                return (
                  <FadeAndSlideTransition
                    duration={450}
                    key={`tenders-${index}`}
                  >
                    <TenderCardHH tender={tender} />
                  </FadeAndSlideTransition>
                );
              })}
            </TransitionGroup>
          </InfiniteScroll>
        ) : (
          <span>loading</span>
        )}
      </div>
    );
  }
}

TenderList.propTypes = {
  tenders: PropTypes.array
};

const mapStateToProps = state => {
  return {
    tenders: state.tenderList.tenders,
    isLoadingInitial: state.tenderList.isLoadingInitial
  };
};

const mapDispatchToProps = dispatch => {
  return {
    fetchTenders: () => {
      dispatch(fetchTenders());
    }
  };
};

TenderList.propTypes = {
  fetchTenders: PropTypes.func,
  isLoadingInitial: PropTypes.bool,
  renderList: PropTypes.func
};

export default connect(mapStateToProps, mapDispatchToProps)(TenderList);