import React from 'react';
import {connect} from 'react-redux';
import testAction from '../actions/test';
import fetchVideos from '../actions/fetchVideos';
import Search from '../subComponents/Search';
import Footer from '../subComponents/Footer';
import RandomLocation from "../subComponents/RandomLocation";
import RandomDate from "../subComponents/RandomDate";
import RandomTopic from "../subComponents/RandomTopic";
import Header from "../subComponents/Header";
class Home extends React.Component {
  clickBtn() {
    this.props.testAction('some new value');
  }

  render() {
    return (
      <div>
        <Header/>
        <Search/>
        <RandomTopic/>
        <RandomLocation/>
        <RandomDate/>
        <Footer/>
      </div>
    );
    //
    // <div>
    //   This is home. {this.props.test}
    //   <div>
    //     <Link to="/topics">Go to topics</Link>
    //   </div>
    //   <div>
    //     <button onClick={this.clickBtn.bind(this)}>Click me</button>
    //     <button onClick={this.props.fetchVideos}>Fetch videos</button>
    //   </div>
    //   <div>
    //     {this.props.loading && 'Loading...'}
    //     {this.props.videos.map(video => {
    //       return (<div key={video.id}>{video.title}</div>);
    //     })}
    //   </div>
    // </div>

  }
}

const mapStateToProps = state => ({
  test: state.home.test,
  loading: state.home.loading,
  videos: state.home.videos
});

const mapDispatchToProps = dispatch => ({
  testAction: value => dispatch(testAction(value)),
  fetchVideos: () => dispatch(fetchVideos())
});

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