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

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

  load () {
    console.log('load html5 html')
    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})` })
    }

    this.$video = $('<video></video>')
    this.setdefault()
    this.$video.appendTo(this.$wrap)

    this.video.trigger(EVENTS.LOAD)
    this.video.trigger(EVENTS.LOADED)
    if (this.options.poster) {
      this.$poster.hide()
    }
    this.bind()
  }

  setdefault () {
    if (is.array(this.options.url)) {
      for (let i = 0; i < this.options.url.length; i++) {
        const videoTypeArr = this.options.url[i].split('.')
        const videoType = videoTypeArr[videoTypeArr.length - 1]

        this.addSourceToVideo(this.options.url[i], videoType)
      }
    } else {
      const videoTypeArr = this.options.url.split('.')
      const videoType = videoTypeArr[videoTypeArr.length - 1]

      this.addSourceToVideo(this.options.url, videoType)
    }

    this.$video[0].autoplay = this.options.autoplay
    this.$video[0].controls = this.options.controls
    this.$video[0].loop = this.options.loop
  }

  createHtml () {
    let poster = ''

    if (this.options.poster !== '') {
      poster = templateEngine.render(this.options.templates.poster.call(this), { classes: this.classes })
    }

    const html = templateEngine.render(this.options.template.call(this), {
      classes: this.classes,
      poster
    })
    return html
  }

  addSourceToVideo (src, type) {
    const source = document.createElement('source')

    source.src = src
    source.type = `video/${type}`

    this.$video[0].appendChild(source)
  }

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

  switchVideo (id) {
    this.$video[0].src = id
  }

  bind () {
    this.eventListener('play')
    this.eventListener('pause')
    this.eventListener('error')
    // this.eventListener('stalled')
  }

  eventListener (event) {
    const capitalEvent = event.toUpperCase()
    this.$video.on(event, () => {
      this.video.trigger(EVENTS[capitalEvent])
    })
  }

  currentTime () {
    return this.$video[0].currentTime
  }

  duration () {
    return this.$video[0].duration
  }

  setCurrentTime (val) {
    this.$video[0].currentTime = val
  }

  pause () {
    this.$video[0].pause()
  }

  play () {
    this.$video[0].play()
  }

  mute () {
    this.$video[0].muted = true
  }

  unMute () {
    this.$video[0].muted = false
  }

  stop () {
    this.$video[0].currentTime = 0
    this.$video[0].pause()
    this.video.trigger(EVENTS.STOP)
  }

  volume (value) {
    this.$video[0].volume = value / 100
  }

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

export default Html5
