import React, { Component } from 'react';
import Sticky from '../components/Sticky';
import MovieNav from '../components/MovieNav';
import MovieCards from '../components/MovieCards';
import PropTypes from 'prop-types';
import Loader from '../components/Loader';

const propTypes = {
  sticky: PropTypes.bool.isRequired,
  navigation: PropTypes.object.isRequired,
  loadingMovies: PropTypes.bool.isRequired
};

class MovieContent extends Component {
  componentWillMount() {}  
  
  paginationOnChange = (page) => {
    this.props.setPage(page);
  }
  
  
() {
    const {
      dispatch,
      height,
      sticky,
      movies,
      navigation,
      loadingMovies
    } = this.props;
    
    return (
      <div className={`movies ${(sticky ? 'sticky' : '')}`}>
        <MovieNav {...this.props} />
        { (loadingMovies) ? <Loader /> : <MovieCards {...this.props} data={movies.data} /> }
        {/* { this.props.loading ? <Loader /> : null } */}     
      </div>
    );
  }
} 

MovieContent.propTypes = propTypes;

export default Sticky(MovieContent, 50);

render