import React, { Component } from 'react';
import Wikipedia from './areainfo/Wikipedia';
import { Col, Tabs, Tab,} from 'react-bootstrap';
import axios from 'axios';
import Linkify from "react-linkify";
import Card from "react-bootstrap/lib/Card";
import moment from 'moment';
import momentDurationFormat from 'moment-duration-format';

class VideoInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            VideoDetails: {},
            videoId: '0J2QdDbelmY',
            comments: []
        };
        this.momentDuration = this.momentDuration.bind(this);
    }

    momentDuration(duration){
        return moment.duration(duration).format('hh:mm:ss');
    }

    // componentWillMount() {
    //     if (this.props.match.params.id) {
    //         if (this.props.match.params.id === this.state.videoId) { }
    //         else {
    //             this.setState({ videoId: this.props.match.params.id });
    //         }
    //     }
    // }

    componentDidMount() {
        console.log('didmount',this.state.videoId)
        axios.all([
            axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
            params: {
                'part': 'snippet,contentDetails,statistics,topicDetails',
                'id': this.state.videoId,
                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
            }
        }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
            params: {
                'part': 'snippet',
                'videoId': this.state.videoId,
                'order': 'relevance',
                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
            }
        })])
            .then(axios.spread((videosResponse, commentThreadResponse) => {
                this.setState({
                    VideoDetails: videosResponse.data.items,
                    comments: commentThreadResponse.data.items,
                    isLoaded: true
                });
            }), error => {
                console.error(error);
                this.setState({
                    isLoaded: true,
                    error
                });
            });
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.info('didup', this.props.match.params.id)
        // this.setState((state, props) => { return {  }});
        if (this.props.match.params.id && !(prevProps.match.params.id === this.props.match.params.id)) {
            this.setState({ videoId: this.props.match.params.id, isLoaded: false });
            axios.all([
                axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
                    params: {
                        'part': 'snippet,contentDetails,statistics,topicDetails',
                        'id': this.props.match.params.id,
                        'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
                    }
                }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
                    params: {
                        'part': 'snippet',
                        'videoId': this.props.match.params.id,
                        'order': 'relevance',
                        'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
                    }
                })])
                .then(axios.spread((videosResponse, commentThreadResponse) => {
                    this.setState({
                        VideoDetails: videosResponse.data.items,
                        comments: commentThreadResponse.data.items,
                        isLoaded: true
                    });
                }), error => {
                    console.error(error);
                    this.setState({
                        isLoaded: true,
                        error
                    });
                });
        }
    }

    // shouldComponentUpdate(nextProps, nextState){
    //     console.log('shouldup', nextProps, nextState)
    //     if(nextProps.match.params.id)
    //         return console.log('a',!(nextProps.match.params.id === this.state.videoId)) && !(nextProps.match.params.id === this.state.videoId) ;
    //     else if(!(nextState.videoId === this.state.videoId))
    //         return console.log('b') && true;
    //     else if(nextState.isLoaded)
    //         return console.log('d') && true;
    //     else
    //         return console.log('c') && false;

    // }

    // componentWillReceiveProps(nextProps){
    //     if (nextProps.match.params.id === this.state.videoId) {  console.log('1',nextProps)}
    //     else if (nextProps.match.params.id) {
    //         console.log('2',nextProps)
    //         this.setState({ videoId: nextProps.match.params.id });
    //         axios.all([
    //             axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
    //             params: {
    //                 'part': 'snippet,contentDetails,statistics,topicDetails',
    //                 'id': nextProps.match.params.id,
    //                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
    //             }
    //         }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
    //             params: {
    //                 'part': 'snippet',
    //                 'videoId': nextProps.match.params.id,
    //                 'order': 'relevance',
    //                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
    //             }
    //         })])
    //             .then(axios.spread((videosResponse, commentThreadResponse) => {
    //                 this.setState({
    //                     VideoDetails: videosResponse.data.items,
    //                     comments: commentThreadResponse.data.items,
    //                     isLoaded: true
    //                 });
    //             }), error => {
    //                 console.error(error);
    //                 this.setState({
    //                     isLoaded: true,
    //                     error
    //                 });
    //             });
    //     }
    //     else{
    //         console.log('3',nextProps)
    //     }
    // }

    render() {
        const { error, isLoaded, VideoDetails, comments } = this.state;
        const momentDuration  = this.momentDuration; // bind momentDuration in render to the actual method
        if (error) {
            return (
                <React.Fragment>
                    Error: {error.message} -- Cannot get {error.config.url}
                </React.Fragment>
            );
        } else if (!isLoaded) {
            return <React.Fragment>Loading...</React.Fragment>;
        } else {
            return (
                <React.Fragment>
                    <Col >
                        {/* codice per tabs reccomenders */}
                        <Tabs defaultActiveKey={1} id="tabs" animation={0}>
                            <Tab eventKey={1} title="Video">
                                <div style={{color : 'white'}}>
                                    {this.state.VideoDetails.map(function(item,index){
                                            return(
                                                <div key={index}>
                                                    <h5>{item.snippet.title}</h5>
                                                    <p><b>ID Video :</b> {item.id}<br/>
                                                        <b>Publish Time :</b> {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
                                                            return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6);
                                                        })}<br/>
                                                        <b>Channel Name :</b> {item.snippet.channelTitle}<br/>
                                                        <b>Description :</b><br/><Linkify>{item.snippet.description}</Linkify><br/>
                                                        <b>Tags :</b><br/>{item.snippet.tags.map(function(element,index){
                                                            if(index===4)
                                                                return (<br/>);
                                                            return(
                                                                <span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
                                                            )
                                                        })}
                                                    </p>
                                                </div>
                                            )
                                        }
                                    )}
                                </div>
                            </Tab>
                            <Tab eventKey={2} title="Tecnical Informations">
                                <div style={{color:'white'}}>
                                    {this.state.VideoDetails.map(function (item,index) {
                                        return(
                                            <div key={index}>
                                                <h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
                                                <p><b>Duration :</b>{ momentDuration(item.contentDetails.duration) }<br/>
                                                    <b>Definition :</b> {item.contentDetails.definition}<br/>
                                                    <b>Dimension :</b> {item.contentDetails.dimension}<br/>
                                                    <b> Views :</b> {item.statistics.viewCount}<br/>
                                                    <b>Likes :</b> {item.statistics.likeCount}<br/>
                                                    <b>Dislikes :</b> {item.statistics.dislikeCount}
                                                </p>
                                            </div>
                                        )
                                    })}
                                </div>
                            </Tab>
                            <Tab eventKey={3} title="Comment">
                                <div>
                                    {this.state.comments.map(function (item,index) {
                                        return(
                                            <div key={index}>
                                                <Card style={{width: '30rem',fontSize : 'small',borderRadius : '1rem'}} className="my-1">
                                                    <Card.Body>
                                                        <Card.Title>
                                                            <Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '3rem', height : '3rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}
                                                        </Card.Title>
                                                        <Card.Text>
                                                            <Linkify>
                                                                {item.snippet.topLevelComment.snippet.textDisplay}
                                                            </Linkify>
                                                        </Card.Text>
                                                    </Card.Body>
                                                </Card>
                                            </div>
                                        )
                                    })}
                                </div>
                            </Tab>
                            <Tab eventKey={4} title="Wikipedia">
                                <div>

                                </div>
                            </Tab>
                        </Tabs>
                    </Col>
                </React.Fragment>
            );
        }
    }
}

VideoInfo.propTypes = {

};

export default VideoInfo;