'use strict'

import $ from 'jquery'

import MainUI from '../_main'
import Events from '../_events'
import SpinnerUI from './_ui.spinner'

const VideoPreviewUI = (($) => {
  const NAME = 'jsVideoPreviewUI'
  const DATA_KEY = NAME

  const G = window
  const D = document

  class VideoPreviewUI {
    constructor (el) {
      const ui = this
      ui.$_el = $(el)
      ui.innerHTML = ui.$_el[0].innerHTML

      ui.$_el.data(DATA_KEY, this)
      const href = ui.$_el.attr('href') || ui.$_el.data('href')
      const YouTubeGetID = (url) => {
        const parsedURL = url.split(
          /(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/
        )
        console.log(`${NAME}: ${parsedURL}`)
        return undefined !== parsedURL[2]
          ? parsedURL[2].split(/[^0-9a-z_-]/i)[0]
          : parsedURL[0]
      }

      let video

      if (
        (video = href.match(
          /(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/
        ))
      ) {
        let video_id

        if (
          video[1] === 'youtube' ||
          video[1] === 'youtube-nocookie' ||
          video[1] === 'youtu'
        ) {
          video_id = YouTubeGetID(href)
        }

        if (video[1] == 'vimeo') {
          video_id = video[3]
          ui.$_el.addClass('loading')
          $.ajax({
            type: 'GET',
            url: `https://vimeo.com/api/v2/video/${video_id}.json`,
            jsonp: 'callback',
            dataType: 'jsonp',
            success: function (data) {
              const thumbnail_src = data[0].thumbnail_large
              ui.show(thumbnail_src)
              ui.$_el.removeClass('loading')
            },
          })

          return
        }

        if (video_id) {
          ui.show(`//i3.ytimg.com/vi/${video_id}/0.jpg`)
        }
      }
    }

    show (src) {
      const ui = this
      ui.$_el[0].innerHTML = ''
      ui.$_el.append(`<img src="${src}" alt="Video" />`)
    }

    static dispose () {
      console.log(`${NAME}: dispose`)
      ui.$_el[0].innerHTML = ui.innerHTML
    }

    static _jQueryInterface () {
      return this.each((i, el) => {
        // attach functionality to element
        const $el = $(el)
        let data = $el.data(DATA_KEY)

        if (!data) {
          data = new VideoPreviewUI(el)
          $el.data(DATA_KEY, data)
        }
      })
    }
  }

  // jQuery interface
  $.fn[NAME] = VideoPreviewUI._jQueryInterface
  $.fn[NAME].Constructor = VideoPreviewUI
  $.fn[NAME].noConflict = () => {
    $.fn[NAME] = JQUERY_NO_CONFLICT
    return VideoPreviewUI._jQueryInterface
  }

  // auto-apply
  $(window).on(`${Events.LODEDANDREADY}`, () => {
    console.log(`${NAME}: init`)

    $('[data-video-preview="true"]').each((i, el) => {
      $(el).jsVideoPreviewUI()
    })
  })

  return VideoPreviewUI
})($)

export default VideoPreviewUI