const imgs = ['.png', '.jpg', '.jpeg', '.svg']
const embeds = [
  {
    match: /youtu.?be\//is,
    exec: function (pgurl) {
      let dat = pgurl.match(/(?:be|com)\/([^?&#]+)/i)
      if (!dat) {
        dat = pgurl.match('[\\?&]v=([^&#]*)')
      }

      if (!dat) return null

      return 'https://www.youtube.com/embed/' + dat[1] + '?autoplay=1'
    }
  }
]

export function handleUrlElement (elem) {
  let cover = null
  let ext = elem.href.split('.')
  ext = ext[ext.length - 1]

  if (ext && imgs.indexOf(ext) !== -1) {
    cover = document.createElement('img')
    cover.src = elem.href
  }

  if (!cover) {
    for (let a in embeds) {
      if (cover) break
      let fn = embeds[a]
      if (elem.href.match(fn.match)) {
        let r = fn.exec(elem.href)
        if (r) {
          cover = document.createElement('iframe')
          cover.src = r
        }
      }
    }
  }

  if (cover) {
    cover.className = 'preview'

    let contelem = document.createElement('span')
    contelem.className = 'preview-box'

    let contbutton = document.createElement('button')
    contbutton.className = 'preview-btn'
    contbutton.innerHTML = 'Show Preview'

    elem.parentNode.appendChild(contelem)

    contelem.appendChild(elem)
    contelem.appendChild(contbutton)

    contbutton.addEventListener('click', function (e) {
      e.preventDefault()

      if (cover.parentNode) {
        cover.remove()
        contbutton.innerHTML = 'Show Preview'
      } else {
        contelem.appendChild(cover)
        contbutton.innerHTML = 'Hide Preview'
      }
    }, false)

    return contelem
  }

  return elem
}