import React, { Suspense } from 'react';
import axios from 'axios';
import RatingBreakdown from './RatingBreakdown.jsx';
const ReviewList = React.lazy(()=> import('./ReviewList.jsx'));
import './ratingsAndReviews.css';


class RatingsAndReviews extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      averageRating: '',
      reviewsList: [],
      product_id: '',
      filterSelections: [],
      filteredList: [],
      filterFlag: false
    };
    this.updateFilter = this.updateFilter.bind(this);
    this.filterArray = this.filterArray.bind(this);
    this.reRender = this.reRender.bind(this);
    this.getReviews = this.getReviews.bind(this);
  }

  componentDidMount() {
    this.getReviews(this.props.productMetadata.product_id)
      .then(() => this.setState({ product_id: this.props.productMetadata.product_id }))
      .catch(() => console.log('Error in component mount'))
    }

  getReviews(product_id, sort = 'relevant', count = 2, page = 1) {
      return new Promise((resolve, reject) => {
        axios.get('/reviews', { params: { product_id, sort, count, page } })
          .then(res => resolve( this.setState({ reviewsList: res.data.results }) ))
          .then(() => this.reRender())
          .catch(err => reject(console.log('error ratingsAndReiews.jsx - getReviews')))
      });
    }

  reRender(){
    if (this.state.filterSelections.length) {
      this.filterArray(this.state.reviewsList, this.state.filterSelections);
    } else {
      this.setState({ filteredList: this.state.reviewsList })
    }
  }

  updateFilter(state) {
    let update = [];
    for (let num in state) {
      if (state[num]) {
        update.push(Number(num))
      }
    }
    if (update.length) {
      this.filterArray(this.state.reviewsList, update)
    } else {
      this.setState({
        filterFlag: false,
        filteredList: this.state.reviewsList,
        filterSelections: []
      });
    }
  }

  filterArray(array, ratingFilter) {
    let filtered = [];
    array.forEach( reviewObj => {
      if (ratingFilter.includes(reviewObj.rating)) {
        filtered.push(reviewObj)
      }
    });
    this.setState({
      filteredList: filtered,
      filterSelections: ratingFilter
    });
  }

  render () {
    return (
      <div id='ratings-reviews-main-container'>
        <div id='ratings-reviews-header'>
          <h3>Ratings & Reviews</h3>
        </div>
        <div id='breakdown-reviewlist-content'>
          <div id='rating-breakdown-container'>
            <RatingBreakdown
              productMetadata={this.props.productMetadata}
              updateFilter={this.updateFilter}
            />
          </div>
          <div id='review-list-container'>
          <Suspense fallback={<div>Loading</div>}>
            <ReviewList
              reviewsList={this.state.filteredList}
              getReviews={this.getReviews}
              productMetadata={this.props.productMetadata}
              filterSelections={this.state.filterSelections}
              reRender={this.reRender}
              productInfo={this.props.productInfo}
            />
          </Suspense>
            </div>
          </div>
      </div>
    );

  }
}

export default RatingsAndReviews;