import React, { Component } from 'react';
import {
} from 'react-native';

export default class Youtube extends Component {
  constructor(props) {
    super()
    this.container = null
    this.buildPlayer = this.buildPlayer.bind(this)
  }
  render() {
    return (
      <div ref={(ref) => this.container = ref} />
    )
  }
  componentDidMount() {
    if (YT_READY) {
      this.buildPlayer()
    }
    else {
      setTimeout(this.buildPlayer, 250)
    }
  }
  buildPlayer() {
    this.player = new YT.Player(this.container, {
      videoId: this.props.ytid,
      width: "100%",
      height: 400,
      playerVars: {
        'autohide': 1,
        'autoplay': 0,
        'disablekb': 0,
        'cc_load_policy': 3,
        'controls': 0,
        'enablejsapi': 1,
        'fs': 0,
        'modestbranding': 1,
        'iv_load_policy': 3,
        'loop': 0,
        'showinfo': 0,
        'rel': 0,
        'wmode': 'transparent',
        'hd': 1
      },
      events: {
        onReady: function(e){
          e.target.playVideo()
        },
        onStateChange: function(e){
          switch(e.data){
          case -1:
            // unstarted
            break
          case 0:
            // finished
            break
          case 1:
            // play
            break
          case 2:
            // pause
            break
          case 3:
            // buffering
            break
          case 5:
            // cued
            break
          default:
            break
          }
        }
      }
    })
  }
  componentDidUpdate(prevProps, prevState) {
    if (! this.player) {
      return
    }
    else if (prevProps.ytid !== this.props.ytid) {
      this.player.loadVideoById( this.props.ytid )
    }
  }
}

let YT_READY = false

global.onYouTubeIframeAPIReady = function(){
  console.log('youtube api loaded')
  YT_READY = true
}