import $ from 'jquery'

// https://stackoverflow.com/a/18650828
function formatBytes (a, b) {
  if (a === 0) return '0 Bytes'
  const c = 1024
  const d = b || 2
  const e = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
  const f = Math.floor(Math.log(a) / Math.log(c))
  return parseFloat((a / Math.pow(c, f)).toFixed(d)) + ' ' + e[f]
}

function recursiveStats (table, subtable) {
  for (const key in table) {
    let val = table[key]
    if (typeof val === 'object') {
      recursiveStats(val, key)
    } else {
      if (key === 'time') {
        const date = new Date(null)
        date.setSeconds(Math.floor(parseInt(val) / 1000)) // specify value for SECONDS here
        val = date.toISOString().substr(11, 8)
      } else if (key.indexOf('bytes') !== -1) {
        val = formatBytes(val, 3)
      }
      $('#stat_' + (subtable ? subtable + '_' : '') + key).text(val)
    }
  }
}

function updateLinkList (k) {
  if (k && k.error) return alert(k.error)
  $.get('/dashboard/link', function (res) {
    if (res.error) return
    $('#link-list').html('<tbody></tbody>')
    $('#link-list tbody').append('<tr><th>Name</th><th>URL</th><th>Action</th></tr>')

    for (const i in res) {
      const p = res[i]
      p.name = p.name.replace(/\</g, '&lt;').replace(/\>/g, '&gt;')
      $('#link-list tbody').append('<tr data-url="' + p.url + '"><td>' + p.name + '</td><td>' +
        '<a href="' + p.url + '" target="_blank" rel="nofollow">' +
        p.url + '</a></td><td><a href="#" class="delete-link">Remove</a></td></tr>')
    }

    $('.delete-link').click(function (e) {
      e.preventDefault()
      const pr = $(this).parent().parent().attr('data-url')
      $.post('/dashboard/link/delete', { url: pr }, updateLinkList)
    })
  })
}

function dashboard () {
  let key;
  let shown = false;
  $.get('/dashboard/data', function (res) {
    if (res.error) {
      window.location.href = '/'
      return
    }

    // Set key from request
    key = res.key

    const fullURL = window.location.origin + '/watch/' + res.name
    const sourceURL = window.location.origin + '/live/' + res.name + '.m3u8'
    $('#myStream').attr('src', fullURL)
    $('#stream_url').text(fullURL).attr('href', fullURL)
    $('#source_url').text(sourceURL).attr('href', sourceURL)
    $('#stream_live').text(res.live ? 'Yes' : 'No')
  })

  $('#keybox').val('A'.repeat(36))
  $('#keybox').on('click', function (e) {
    $(this)[0].select()
    $(this)[0].setSelectionRange(0, $(this).val().length)
  })

  $('#keybox').on('change', function (e) {
    if (!shown) {
      $('#keybox').val('A'.repeat(36))
    } else {
      $('#keybox').val(key)
    }
  })

  $('#show_key').on('click', function (e) {
    if (shown) {
      $('#keybox').val('A'.repeat(36))
      $('#keybox').attr('type', 'password')
      $('#keybox').attr('readonly', true)
      $(this).text('Reveal Key')
    } else {
      $('#keybox').removeAttr('readonly')
      $('#keybox').val(key)
      $('#keybox').attr('type', 'text')
      $(this).text('Hide Key')
    }
    shown = !shown
  })

  $('#copy_key').on('click', function (e) {
    const i = $('<input>').attr('value', key)
    $(this).append(i)
    $(this).attr('title', 'Click to copy to clipboard')
    i[0].select()
    i[0].setSelectionRange(0, key.length)
    document.execCommand('copy')
    $(i).remove()
    $(this).text('Copied!')
    setTimeout(() => $(this).text('Copy'), 1000)
  })

  $('.go-page').on('click', function (e) {
    const el = $(this)
    $('.go-page').removeClass('active')
    el.addClass('active')
    $('.page:visible').fadeOut(function () {
      $('#page-' + el.attr('data-page')).fadeIn()
    })
  })

  $('#add-link').on('submit', function (e) {
    e.preventDefault()
    const name = $('input[name="name"]').val()
    const url = $('input[name="url"]').val()

    if (name.length > 120) return alert('Only 120 characters are allowed in the name.')

    $.post('/dashboard/link', { name, url }, function () {
      $('input[name="name"]').val('')
      $('input[name="url"]').val('')
      updateLinkList()
    })
  })

  setInterval(function () {
    $.get('/dashboard/stats', function (res) {
      if (res.error) return
      recursiveStats(res, '')
    })
  }, 5000)

  updateLinkList()

  let hash = window.location.hash
  if (hash.indexOf('#') === 0) hash = hash.substr(1)
  if ($('#page-' + hash).length) {
    $('.go-page').removeClass('active')
    $('.go-page[data-page="' + hash + '"').addClass('active')
    $('.page:visible').hide()
    $('.page#page-' + hash).show()
  }
}

export default dashboard