const Routing = require('./routing')

const Post = function (w) {
  this.window = w
}

Post.prototype.commentsEvents = function () {
  const document = this.window.document

  const parentCommentIdField = document.getElementById('user_comment_parentCommentId')

  if (!parentCommentIdField) {
    return
  }

  const isAnswerAlert = document.getElementById('answer-alert')
  const cancelAnswerButton = document.getElementById('cancel-answer')

  const toogleAnswerAlert = function () {
    if (parentCommentIdField.value) {
      isAnswerAlert.classList.remove('hidden')
    } else {
      isAnswerAlert.classList.add('hidden')
    }
  }

  toogleAnswerAlert()

  const answerButtons = document.querySelectorAll('a[data-answer]')

  for (let i = 0, len = answerButtons.length; i < len; i++) {
    answerButtons[i].addEventListener('click', function (e) {
      parentCommentIdField.value = e.target.getAttribute('data-answer')
      toogleAnswerAlert()
    }, false)
  }

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

    parentCommentIdField.value = null
    toogleAnswerAlert()
  }, false)

  const previewButton = document.querySelector('.preview-button')
  const previewRender = document.querySelector('#preview')

  previewButton.addEventListener('click', function () {
    if (previewRender.innerHTML === '') {
      previewRender.innerHTML = '<p>Chargement en cours…</p>'
    }

    const content = document.querySelector('#user_comment_content').value
    const httpRequest = new XMLHttpRequest()

    httpRequest.onreadystatechange = function (data) {
      if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        const json = JSON.parse(httpRequest.response)
        previewRender.innerHTML = json.render
        document.location.href = '#preview'
      }
    }

    httpRequest.open('POST', Routing.generate('api_blog_comment_preview'))
    httpRequest.setRequestHeader(
      'Content-Type',
      'application/x-www-form-urlencoded'
    )
    httpRequest.send('content=' + encodeURIComponent(content))
  }, false)
}

Post.prototype.imagesEvents = function () {
  const document = this.window.document
  let isFullscreen = false
  const images = document.querySelectorAll('.body img')

  const handleClick = function (image) {
    if (isFullscreen) {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      }
    } else {
      if (image.requestFullscreen) {
        image.requestFullscreen()
      } else if (image.webkitRequestFullscreen) {
        image.webkitRequestFullscreen()
      } else if (image.mozRequestFullScreen) {
        image.mozRequestFullScreen()
      }
    }

    isFullscreen = !isFullscreen
  }

  for (let i = 0, len = images.length; i < len; i++) {
    const image = images[i]

    if (image.parentNode.tagName === 'A') {
      continue
    }

    (function (i) {
      i.addEventListener('click', function () {
        handleClick(i)
      }, false)
    })(image)
  }
}

Post.prototype.init = function () {
  this.commentsEvents()
  this.imagesEvents()
}

module.exports = Post