import React from 'react';
import ReactDOM from 'react-dom';
import Playlist from './playlist';


const VideoListItem = (props) => {
  const video = props.video;
  const onUserSelected = props.onUserSelected;
  console.log(video);
  const imageUrl = video.snippet.thumbnails.default.url;

  let FavouriteVideos = (video) => {
    this.setState(props).onClick = [
      FavouriteVideos = {
        count: 0
      }
    ]
    this.FavouriteVideos = this.FavouriteVideos.bind(this);
  }

  return(
    <li onClick={() => onUserSelected(video)} className="list-group-item">
      <button onClick={() => FavouriteVideos(video)}>+</button>
      <div className="video-list media">
        <div className="media-left">
          <img className="media-object" src={imageUrl} alt={video.title} />
        </div>
        <div className="media-body">
          <div className="media-heading">{video.snippet.title}</div>
        </div>
      </div>
    </li>
  );
};

export default VideoListItem;