function addNotification(msg, className='is-warning') {
  var n = document.createElement('div')
  n.classList.add('notification')
  n.classList.add(className)
  n.innerHTML = msg
  document.getElementById('notifications').appendChild(n)
}

function mediumFetch(e) {
  if(e) { e.preventDefault() }

  const postSlug = document.querySelector('[data-post-slug]').dataset.postSlug
  const mediumUrl = document.querySelector('[data-post-mediumurl]').dataset.postMediumurl
  console.log('Fetching ' + postSlug)
  const socketProtocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:')
  const socketUrl = socketProtocol + '//' + window.location.host + '/ws/fetch-medium/'
  const socket = new WebSocket(socketUrl)

  // set up the div
  statusDiv = document.getElementById('statusbar')
  statusText = document.createElement('p')
  statusText.innerText = 'Fetching post'
  statusText.classList.add('card-footer-item')

  // hide buttons
  for (i=0;i<statusDiv.children.length;i++) {
    statusDiv.children[i].classList.add('is-hidden')
  }

  statusDiv.appendChild(statusText)

  socket.onopen = () => {
    socket.send('fetch ' + postSlug + ' ' + mediumUrl)
  }

  socket.onmessage = m => {
    console.log('Got message: ' + m.data)

    console.log(m.data)
    if (m.data.indexOf(': ') != -1) {
      var command = m.data.slice(0, m.data.indexOf(': '))
      var commandData = m.data.slice(m.data.indexOf(': ')+2)

      statusText.innerHTML = `<b>${command}: </b>${commandData}`

      // if it's done, clean up
      if (command == 'done') {
        // remove statusbar
        statusDiv.removeChild(statusText)

        // show alert
        addNotification(`${postSlug} has been fetched successfully. You can now push it to Ghost`, 'is-success')

        // show buttons, change text and save slug
        for (i=0;i<statusDiv.children.length;i++) {
          if (statusDiv.children[i].innerText.startsWith('Fetch')) {
            statusDiv.children[i].innerText = 'Fetch again'
          }
          if (statusDiv.children[i].innerText == 'Push to Ghost') {
            statusDiv.children[i].dataset.postSlug = commandData
          }
          statusDiv.children[i].classList.remove('is-hidden')
        }
      } else if (command == 'notification') {
        addNotification(commandData)
      }

    } else {
      statusText.innerHTML = m.data
    }
  }
}

function ghostPush(e) {
  if(e) { e.preventDefault() }

  const postSlug = document.querySelector('[data-post-slug]').dataset.postSlug
  console.log('Pushing ' + postSlug)
  const socketProtocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:')
  const socketUrl = socketProtocol + '//' + window.location.host + '/ws/push-ghost/'
  const socket = new WebSocket(socketUrl)

  // set up the div
  statusDiv = document.getElementById('statusbar')
  statusText = document.createElement('p')
  statusText.innerText = 'Pushing to Ghost'
  statusText.classList.add('card-footer-item')

  // hide buttons
  for (i=0;i<statusDiv.children.length;i++) {
    statusDiv.children[i].classList.add('is-hidden')
  }

  statusDiv.appendChild(statusText)

  socket.onopen = () => {
    socket.send('push ' + postSlug)
  }

  socket.onmessage = m => {
    console.log('Got message: ' + m.data)

    console.log(m.data)

    if (m.data.indexOf(': ') != -1) {
      var command = m.data.slice(0, m.data.indexOf(': '))
      var commandData = m.data.slice(m.data.indexOf(': ')+2)

      statusText.innerHTML = `<b>${command}: </b>${commandData}`

      // if it's done, clean up
      if (command[0] == 'done') {
        // remove statusbar
        statusDiv.removeChild(statusText)

        // show alert
        addNotification(`${postSlug} has been pushed to Ghost`, 'is-success')

        // show buttons and change text
        for (i=0;i<statusDiv.children.length;i++) {
          if (statusDiv.children[i].innerText.startsWith('Push')) {
            statusDiv.children[i].innerText = 'Push again'
          }
          statusDiv.children[i].classList.remove('is-hidden')
        }
      } else if (command == 'notification') {
        var n = document.createElement('div')
        n.classList.add('notification')
        n.classList.add('is-warning')
        n.innerHTML = commandData
        document.getElementById('notifications').appendChild(n)
      }

    } else {
      statusText.innerHTML = m.data
    }
  }
}