import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import testAction from '../actions/test';
import fetchVideos from '../actions/fetchVideos';

class Home extends React.Component {
  clickBtn() {
    this.props.testAction('some new value');
  }

  render() {
    return (
      <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 ref={ 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);