import templateEngine from '@pluginjs/template'
import $ from 'jquery'
import { events as EVENTS } from '../constant'

window.AsYTAPIReady = false

class Youtube {
  constructor (video, element, options) {
    this.element = element
    this.options = options
    this.video = video
    this.classes = video.classes
  }

  load () {
    this.$wrap = $(this.createHtml())
    this.$wrap.appendTo(this.element)
    if (this.options.poster) {
      this.$poster = this.$wrap.find(`.${this.video.classes.POSTER}`)
      this.$poster.css({ 'background-image': `url(${this.options.poster})` })
    }

    if (window.AsYTAPIReady) {
      this.init()
      this.video.trigger(EVENTS.LOAD)
    } else {
      this.loadApi()
    }
  }

  init () {
    this.$iframe = $('<div></div>')
    this.$iframe.appendTo(this.$wrap)

    this.setdefault()

    const playerSettings = {
      volume: 0, // 0 - 100
      autohide: 0, // autohide controls
      autoplay: this.options.autoplay, // autoplay on load
      color: 'red', // red, white
      controls: this.options.controls, // show control UI
      disablekb: 0, // enable/disable keyboard control
      enablejsapi: 1,
      fs: 0, // display fullscreen button
      hl: null, // interface language
      // iv_load_policy: 3,
      loop: 1, // loop video flag (doesn't work properly)
      modestbranding: 1, // show/hide youtube logo
      playsinline: 0,
      rel: 0, // shows relative videos
      showinfo: 0,
      start: 0, // set beginning of the video
      end: 0, // set end of the video
      quality: 'default' // small, medium, large, hd720, hd1080, highres or default
    }

    this.media = new YT.Player(this.$iframe[0], {
      videoId: this.getId(),
      mute: true,
      repeat: true,
      playButtonClass: 'YTPlayer-play',
      pauseButtonClass: 'YTPlayer-pause',
      muteButtonClass: 'YTPlayer-mute',
      volumeUpClass: 'YTPlayer-volume-up',
      volumeDownClass: 'YTPlayer-volume-down',
      start: 0,
      pauseOnScroll: false,
      fitToBackground: true,
      playerVars: playerSettings,
      events: { onReady: () => {
          this.video.trigger(EVENTS.LOADED)
          if (this.options.poster) {
            this.$poster.hide()
          }
        } }
    })
    this.bind()
  }

  getId () {
    if (this.options.id) {
      return this.options.id
    } else if (this.options.url) {
      return this.options.url.split('/')[3].split('?v=')[1]
    }
    return undefined
  }

  loadApi () {
    $.getScript('//www.youtube.com/iframe_api', (response, status) => {
      console.log('text status', status)
      window.AsYTAPIReady = true

      window.onYouTubeIframeAPIReady = () => {
        this.init()
        this.video.trigger(EVENTS.LOAD)
      }
    })
  }

  setdefault () {
    this.options.autoplay = this.options.autoplay ? 1 : 0
    this.options.controls = this.options.controls ? 1 : 0
  }

  setSize (width, height) {
    this.$wrap.css('width', width)
    this.$wrap.css('height', height)
  }

  switchVideo (id) {
    this.media.loadVideoById({ videoId: id })
  }

  createHtml () {
    let poster = ''

    if (this.options.poster !== '') {
      poster = templateEngine.render(this.options.templates.poster.call(this), { classes: this.classes })
    }
    console.log('text', this.classes)
    const html = templateEngine.render(this.options.template.call(this), {
      classes: this.classes,
      poster
    })
    return html
  }

  bind () {
    this.media.addEventListener('onStateChange', event => {
      if (event.data === 1) {
        this.video.trigger(EVENTS.PLAY)
      } else if (event.data === 2) {
        this.video.trigger(EVENTS.PAUSE)
      } else if (event.data === 0) {
        this.video.trigger(EVENTS.PLAYEND)
        if (this.options.loop === true) {
          this.play()
        }
      }
    })
    this.media.addEventListener('onError', () => {
      this.video.trigger(EVENTS.PLAYERR)
    })
  }

  currentTime () {
    return this.media.getCurrentTime()
  }

  duration () {
    return this.media.getDuration()
  }

  setCurrentTime (val) {
    this.media.seekTo(val, true)
  }

  volume (value) {
    this.media.setVolume(value)
  }

  mute () {
    this.media.mute()
  }

  unMute () {
    this.media.unMute()
  }

  pause () {
    this.media.pauseVideo()
  }

  stop () {
    this.media.stopVideo()
    this.video.trigger(EVENTS.STOP)
  }

  play () {
    this.media.playVideo()
  }

  destroy () {
    const element = this.$wrap.find('iframe')
    if (element.length) {
      element[0].src = '//about:blank'
    }
    this.$wrap.remove()
  }
}

export default Youtube
