import React, {useState} from 'react';
import styles from './HomePage.module.css';
import { connect } from 'react-redux';
import { fetchVideoByQuery, fetchCommentsForVideo } from '../../actions/index';
import YouTube from 'react-youtube';
const HomePage = (props) => {
const [searchText, setSearchText] = useState(null);
const { isLoading, videos, fetchVideoByQuery, fetchCommentsForVideo, nextPageToken, videoComments } = props;
console.log(props)
const searchByQuery = () => {
fetchVideoByQuery(searchText);
}
const onSearchTextChange = (e) => {
setSearchText(e.target.value);
}
const loadMoreData = () => {
fetchVideoByQuery(searchText, nextPageToken);
}
const showComments = (videoId) => {
fetchCommentsForVideo(videoId);
}
if (isLoading) {
return <p>Loading...</p>
}
return <div>
<div className={styles.videoSearchForm}>
<form>
<input type="text" value={searchText} onChange={onSearchTextChange} placeholder="What do you want to watch?"/>
<button type="button" onClick={searchByQuery}>Search</button>
</form>
</div>
<div className={styles.videoFrame}>
{videos.length > 0 && videos.map((video, index) => <div key={index} >
{video.map((item, index) => <div key={index}>
<YouTube opts={{ width: '100%' }} videoId={item.id.videoId}/>
<button type="button" onClick={() => showComments(item.id.videoId)}>Show comments</button>
</div>
)}
</div>)
}
</div>
<div className={styles.showMoreContainer}>
<button type="button" onClick={loadMoreData}>Show more</button>
</div>
</div>
}
export default connect(
state => ({
isLoading: state.videoReducer.isLoading,
videos: state.videoReducer.videos,
nextPageToken: state.videoReducer.nextPageToken,
videoComments: state.videoReducer.videoComments,
}), { fetchVideoByQuery, fetchCommentsForVideo }
)(HomePage);