import React, { Component } from 'react';
  // import PropTypes from 'prop-types';
  import Wikipedia from './areainfo/Wikipedia';
  import { Col, Tabs, Tab } from 'react-bootstrap';
  import axios from 'axios';

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

    }

    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() {
      axios.get('https://www.googleapis.com/youtube/v3/videos', {
        params: {
          'part': 'snippet,contentDetails,statistics,topicDetails',
          'id': this.state.videoId,
          'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
        }
      }).then(response => {
        this.setState({
          VideoDetails: response.data.items[0],
          isLoaded: true});
    }, error => {
        console.error(error);
        this.setState({
          isLoaded: true,
          error
        });
      });
    }

    // componentWillReceiveProps(nextProps) {

    // }

    // shouldComponentUpdate(nextProps, nextState) {

    // }

    componentWillUpdate(nextProps, nextState) {
      // console.info('nextProps',nextProps);
      // console.info('nextState',nextState);
      if(nextProps.match.params.id === this.state.videoId){}
      else if( nextProps.match.params.id){
        this.setState({videoId: nextProps.match.params.id});
      }
    }

    componentDidUpdate(prevProps, prevState) {
      // console.info('prevProps',prevProps);
      // console.info('prevState',prevState);
    }

    // componentWillUnmount() {

    // }

    render() {
      const { error, isLoaded, VideoDetails } = this.state;
    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 className='border border-dark' lg={{span:7}}>
          {/* codice per tabs reccomenders */}
          <Tabs defaultActiveKey="a" id="uncontrolled-tab-example">
    <Tab eventKey="a" title="A">
      <Wikipedia query={ this.props.location.state ? this.props.location.state.title : VideoDetails.snippet.title } />
    </Tab>
    <Tab eventKey="b" title="B">
      <p>{}</p>
    </Tab>
    <Tab eventKey="c" title="C">
    <p>C</p>
    </Tab>
  </Tabs>
          </Col>
          <Col className='border border-dark'  lg={{span:4, offset:1}}>
          <p>2</p>
          </Col>
        </React.Fragment>
      );
    }
    }
  }

  VideoInfo.propTypes = {

  };

  export default VideoInfo;