import React from 'react';
import {connect} from 'react-redux';
import {getAllTopics, getRandomTopicVideos} from '../actions/topics';
import {getAllPlaces, getRandomPlaceVideos} from '../actions/places';
import RandomPlace from "../components/RandomPlace";
import RandomDate from "../components/RandomDate";
import RandomTopic from "../components/RandomTopic";

class Home extends React.Component {
  componentDidMount() {
    if (this.props.allTopics && this.props.allTopics.length > 0 && !this.props.randomTopic) {
      this.props.getRandomTopicVideos(this.props.allTopics);
    } else {
      this.props.getAllTopics();
    }
    // places
    if (this.props.allPlaces && this.props.allPlaces.length > 0 && !this.props.randomPlace) {
      this.props.getRandomPlaceVideos()(this.props.allPlaces);
    } else {
      this.props.getAllPlaces();
    }
  }

  componentWillReceiveProps(nextProps) {
    // This is slightly awkward - we need to check that we have all topics,
    // But don't have a random topic yet (or at not already loading a random topic)
    if ((this.props.allTopics || nextProps.allTopics) && !this.props.loadingRandomTopic && !nextProps.loadingRandomTopic && !this.props.randomTopic) {
      this.props.getRandomTopicVideos(nextProps.allTopics);
    }
    // places
    if ((this.props.allPlaces || nextProps.allPlaces) && !this.props.loadingRandomPlace && !nextProps.loadingRandomPlace && !this.props.randomPlace) {
      this.props.getRandomPlaceVideos()(nextProps.allPlaces);
    }
  }

  render() {
    return (
      <div>
        <RandomTopic
          topicName={this.props.randomTopic || ''}
          allTopics={this.props.allTopics || []}
          topicCount={this.props.randomTopicCount}
          videos={this.props.randomTopicVideos || []}
          loading={this.props.loadingAllTopics || this.props.loadingRandomTopic}
          getRandomTopicVideos={this.props.getRandomTopicVideos}
        />
        <RandomPlace
          placeName={this.props.randomPlace || ''}
          allPlaces={this.props.allPlaces || []}
          placeCount={this.props.randomPlaceCount}
          videos={this.props.randomPlaceVideos || []}
          loading={this.props.loadingAllPlaces || this.props.loadingRandomPlace}
          getRandomPlaceVideos={this.props.getRandomPlaceVideos}
        />
        <RandomDate/>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  allTopics: state.topics.allTopics,
  loadingAllTopics: state.topics.loadingAllTopics,
  randomTopic: state.topics.randomTopic,
  randomTopicCount: state.topics.randomTopicCount,
  loadingRandomTopic: state.topics.loadingRandomTopic,
  randomTopicVideos: state.topics.randomTopicVideos,
  // places
  allPlaces: state.topics.allPlaces,
  loadingAllPlaces: state.topics.loadingAllPlaces,
  randomPlace: state.topics.randomPlace,
  randomPlaceCount: state.topics.randomPlaceCount,
  loadingRandomPlace: state.topics.loadingRandomPlace,
  randomPlaceVideos: state.topics.randomPlaceVideos,
});

const mapDispatchToProps = dispatch => ({
  getAllTopics: () => dispatch(getAllTopics()),
  getRandomTopicVideos: allTopics => dispatch(getRandomTopicVideos(allTopics)),
  // places
  getAllPlaces: () => dispatch(getAllPlaces()),
  getRandomPlaceVideos: allTopics => dispatch(getRandomPlaceVideos(allTopics)),

});

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