import React from 'react';
import {connect} from 'react-redux';
import { getAllTopics, getRandomTopicVideos } from '../actions/topics';
import Search from '../components/Search';
import Footer from '../components/Footer';
import RandomLocation from "../components/RandomLocation";
import RandomDate from "../components/RandomDate";
import RandomTopic from "../components/RandomTopic";
import Header from "../components/Header";

class Home extends React.Component {
  componentDidMount() {
    if (this.props.allTopics && this.props.allTopics.length > 0) {
      this.props.getRandomTopicVideos(this.props.allTopics);
    } else {
      this.props.getAllTopics();
    }
  }

  componentWillReceiveProps(nextProps) {
    console.log('nextProps', 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);
    }
  }

  render() {
    return (
      <div>
        <RandomTopic
          topicName={ this.props.randomTopic || ''}
          videos = { this.props.randomTopicVideos || [] }
          loading = { this.props.loadingAllTopics || this.props.loadingRandomTopic }
        />
        <RandomLocation/>
        <RandomDate/>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  allTopics: state.topics.allTopics,
  loadingAllTopics: state.topics.loadingAllTopics,
  randomTopic: state.topics.randomTopic,
  loadingRandomTopic: state.topics.loadingRandomTopic,
  randomTopicVideos: state.topics.randomTopicVideos
});

const mapDispatchToProps = dispatch => ({
  getAllTopics: () => dispatch(getAllTopics()),
  getRandomTopicVideos: allTopics => dispatch(getRandomTopicVideos(allTopics))
});

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