//http://site1825.tw.cs.unibo.it/TW/globpop fvitali
//http://site1825.tw.cs.unibo.it/video.json originale videolist

import React from 'react';
import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
import axios from 'axios'; // eslint-disable-line no-unused-vars
import { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
/*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
import moment from "moment";

class fvitali extends React.Component {
		state = {
			error: null,
			isLoaded: false,
			items: [],
			headers: null
		};

		ISO_8601parse(a) {
			return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
		}
	
	componentDidMount() {
		axios.get('http://site1825.tw.cs.unibo.it/TW/globpop', {
			'params':{
				'id':this.props.videoID
			}
		}).then(
			response => {
				//this.shuffleArray(response.data);			
				console.info ('a',response.data);
				this.getThumbnailsNames(response.data.recommended);
								console.info(response.data.recommended); 
				// 				this.setState({
				// 	isLoaded: true, 
				// 	items:response.data.recommended,
				// });

			},
			// Note: it's important to handle errors here
			// instead of a catch() block so that we don't swallow
			// exceptions from actual bugs in components.
			error => {
				console.error(error);
				this.setState({
					isLoaded: true,
					error
				});
			}
		);
	}

	// METODI
	getThumbnailsNames(reccomended) {
		let idToLookFor = reccomended.map(item => item.videoID);
				axios.get('https://www.googleapis.com/youtube/v3/videos', {
					params: {
						part: 'snippet',
						id: idToLookFor.toString(),
						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
						fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
					}
				})

			.then(
				res1 => {
					res1.data.items.map(resCurrentValue => 
						Object.defineProperties(
							reccomended.find(videoItem => {
								return videoItem.videoID === resCurrentValue.id;
							}),
							{
							'thumbnail':
							{ value: resCurrentValue.snippet.thumbnails.medium.url },
							'name':
							{value: resCurrentValue.snippet.title}
						})
					);
					this.setState({
						isLoaded: true,
						items: reccomended
					});
				})
	}



	/*shuffleArray(videoarray) {
		for (let i = videoarray.length - 1; i > 0; i--) {
			const j = Math.floor(Math.random() * (i + 1));
			[videoarray[i], videoarray[j]] = [videoarray[j], videoarray[i]]; // eslint-disable-line no-param-reassign
		}
		// Durstenfeld shuffle.
		// https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
	}*/

	render() {
		const { error, isLoaded, items } = this.state;
		if (error) {
			return (
				<React.Fragment>
					Error: {error.message} -- Cannot get {error.config.url}
				</React.Fragment>
			);
		} else if (!isLoaded) {
			return (
				<React.Fragment>
					<Col>
						<p className="text-center">Loading...</p>
					</Col>
				</React.Fragment>
			);
		} else {
			return (
				<React.Fragment>
					{items.map(item=>( <Col md="4">
                            <Card key={item.videoID}>
                                <Link
                                    to={{
                                        pathname: '/video/' + item.videoID,
                                    }}
                                >
                                    <Card.Img
                                        src={item.thumbnail}
                                        alt={'Thumbnail of ' + item.name}
                                    />
                                    <Card.ImgOverlay>
                                        <Card.Title className="bg-dark d-inline text-white">
                                             {item.name}<br/>
                                             {item.lastSelected}
                                        </Card.Title>
                                    </Card.ImgOverlay>
                                </Link>
                            </Card>
                        </Col>))}

				</React.Fragment>
			);
		}
	}
}



export default fvitali;