import React, { Component } from 'react';
import axios from "axios";
import createpageToken from 'youtube-page-token';
import {Card,Col} from "react-bootstrap";
import {Link} from "react-router-dom";
import moment from "moment";

class RecommenderRandom extends Component{
    constructor(props){
        super(props);
        this.state={
            items : [],
        };
    }


    ISO_8601parse(a) {
        return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
    }

    componentDidMount(){
        let pos = Math.floor(Math.random() * 500);
        let pageToken = createpageToken(pos); /* createPageToken(pos) restituisce il pageToken relativo al numero
                                                di pagina che gli viene passato(in questo caso pos) che verrai poi usato
                                                come parametro da axios per ottenere una determinata pagina di risultati */

        axios.get("https://www.googleapis.com/youtube/v3/search", {
            params: {
                'part': 'snippet',
                'topicId' : '/m/04rlf', //Filtro per la musica.In questo caso il valore è quello della parent directory
                'type' : 'video',       //che contiene tutti i generi di musica
                'maxResults': '21',
                'pageToken' : pageToken,
                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // process.env.APIKEY in production
            }
        }).then(
            response => {
                this.setState({
                    items : response.data.items,
                })
            },
            error => {
                console.error(error);
            }
        )
    }

    render(){
        const ISO_8601parse = this.ISO_8601parse;
        return (<React.Fragment>
                {this.state.items.map(function (item,index) {
                    return(
                        <Col key={index} md='4'>
                            <Card>
                                <Link
                                    to={{
                                        pathname: '/video/' + item.id.videoId,
                                    }}
                                >
                                    <Card.Img
                                        src={item.snippet.thumbnails.high.url}
                                        alt={'Thumbnail of ' + item.title}
                                    />
                                    <Card.ImgOverlay>
                                        <Card.Title className="bg-dark d-inline text-white">
                                            {item.snippet.title}<br/>
                                            {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
                                        </Card.Title>
                                    </Card.ImgOverlay>
                                </Link>
                            </Card>
                        </Col>
                    )
                })}
       </React.Fragment> );
    }
}
export default RecommenderRandom;