import React from 'react';
import { connect } from 'react-redux';
import { isEqual } from 'lodash';

import { fetchPostsBySection, fetchSavedPosts } from '../../actions/posts.js';
import { SAVED_TYPE } from '../../constants.js';
import { filterPosts } from './filters.js';

import LoadingIndicator from '../../../../components/LoadingIndicator.js';
import PostItem from './PostItem.js';

class PostList extends React.Component {
  checkScrollHeight = ::this.checkScrollHeight;

  componentDidMount() {
    window.addEventListener('scroll', this.checkScrollHeight);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.checkScrollHeight);
  }

  checkScrollHeight(e) {
    const currentHeight = window.scrollY + window.innerHeight;
    const totalHeight = document.body.offsetHeight;

    const currentPercentage = (currentHeight / totalHeight) * 100;

    if (this.props.next && !this.props.lastReached) {
      if (currentPercentage > 60 && !this.props.isFetching) {
        this.paginate();
      }
    }
  }

  paginate() {
    if (this.props.selected.type === SAVED_TYPE) {
      this.props.fetchSavedPosts(this.props.next);
    } else {
      this.props.fetchPostsBySection(this.props.selected, this.props.next);
    }
  }

  render() {
    const postItems = this.props.postsByType.map((item, index) => {
      return (
        <PostItem
          key={index}
          post={item}
          selected={this.props.selected}
          feedUrl={this.props.feedUrl}
          subredditUrl={this.props.subredditUrl}
          timelineUrl={this.props.timelineUrl}
          timezone={this.props.timezone}
        />
      );
    });

    if (isEqual(this.props.selected, {})) {
      return (
        <div className="post-message">
          <div className="post-message__block">
            <i className="fas fa-arrow-left" />
            <p className="post-message__text">Select an item to show its unread posts</p>
          </div>
        </div>
      );
    } else if (postItems.length === 0 && !this.props.isFetching) {
      return (
        <div className="post-message">
          <div className="post-message__block">
            <p className="post-message__text">
              No unread posts from the selected section at this moment, try again later
            </p>
          </div>
        </div>
      );
    } else {
      return (
        <div className="posts">
          <ul className="posts__list">{postItems}</ul>
          {this.props.isFetching && <LoadingIndicator />}
        </div>
      );
    }
  }
}

const mapStateToProps = state => ({
  isFetching: state.posts.isFetching,
  postsByType: filterPosts(state),
  next: state.selected.next,
  lastReached: state.selected.lastReached,
  selected: state.selected.item,
});

const mapDispatchToProps = dispatch => ({
  fetchPostsBySection: (rule, next = false) => dispatch(fetchPostsBySection(rule, next)),
  fetchSavedPosts: (next = false) => dispatch(fetchSavedPosts(next)),
});

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