Program.js

import $ from 'jquery'
import { Modal, Tab } from 'bootstrap'
import Swal from 'sweetalert2'
import { showSnackbar } from '../components/snackbar'

function redirect (url, spinner, icon = null) {
  const buttonSpinner = $(spinner)
  if (icon) {
    const buttonIcon = $(icon)
    buttonIcon.hide()
  }
  buttonSpinner.removeClass('d-none')
  window.location.href = url
}

$('.project-redirect').on('click', (e) => {
  redirect(
    $(e.currentTarget).data('url'),
    $(e.currentTarget).data('spinner'),
    $(e.currentTarget).data('icon')
  )
})

export const Program = function (projectId, csrfToken, userRole, myProgram, statusUrl, createUrl, likeUrl,
  likeDetailUrl, apkPreparing, apkText, updateAppHeader, updateAppText,
  btnClosePopup, likeActionAdd, likeActionRemove, profileUrl, wowWhite, wowBlack, reactionsText, downloadErrorText) {
  createLinks()
  getApkStatus()

  $('.btn-project-download').on('click', (e) => {
    download(
      $(e.currentTarget).data('path-url'),
      $(e.currentTarget).data('project-id'),
      $(e.currentTarget).data('button-id'),
      $(e.currentTarget).data('is-supported'),
      $(e.currentTarget).data('is-webview'),
      $(e.currentTarget).data('pb'),
      $(e.currentTarget).data('icon')
    )
  })

  let apkDownloadTimeout = false

  function download (downloadUrl, projectId, buttonId, supported = true, isWebView = false,
    downloadPbID, downloadIconID) {
    const downloadProgressBar = $(downloadPbID)
    const downloadIcon = $(downloadIconID)
    const button = document.querySelector(buttonId)
    if (isWebView) {
      window.location = downloadUrl
      return
    }
    button.disabled = true
    if (!supported) {
      showPreparingApkPopup()
      button.disabled = false
      return
    }
    downloadIcon.addClass('d-none')
    downloadProgressBar.removeClass('d-none')
    downloadProgressBar.addClass('d-inline-block')
    fetch(downloadUrl)
      .then(function (response) {
        if (!response.ok) {
          showSnackbar('#share-snackbar', downloadErrorText)
          return null
        }
        return response.blob()
      })
      .then(blob => {
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = url
        a.download = projectId + '.catrobat'
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(url)
        button.disabled = false
        downloadIcon.removeClass('d-none')
        downloadIcon.addClass('d-inline-block')
        downloadProgressBar.removeClass('d-inline-block')
        downloadProgressBar.addClass('d-none')
      })
      .catch(() => {
        button.disabled = false
        downloadIcon.removeClass('d-none')
        downloadIcon.addClass('d-inline-block')
        downloadProgressBar.removeClass('d-inline-block')
        downloadProgressBar.addClass('d-none')
        console.error('downloading project ' + projectId + 'failed')
      })
  }

  function getApkStatus () {
    $.get(statusUrl, null, onResult)
  }

  function createApk () {
    $('#apk-generate, #apk-generate-small').addClass('d-none')
    $('#apk-pending, #apk-pending-small').removeClass('d-none')
    $.get(createUrl, null, onResult)
    showPreparingApkPopup()
  }

  function onResult (data) {
    const apkPending = $('#apk-pending, #apk-pending-small')
    const apkDownload = $('#apk-download, #apk-download-small')
    const apkGenerate = $('#apk-generate, #apk-generate-small')
    apkGenerate.addClass('d-none')
    apkDownload.addClass('d-none')
    apkPending.addClass('d-none')
    if (data.status === 'ready') {
      apkDownload.removeClass('d-none')
      apkDownload.click(function () {
        if (!apkDownloadTimeout) {
          apkDownloadTimeout = true

          setTimeout(function () {
            apkDownloadTimeout = false
          }, 5000)

          window.top.location.href = data.url
        }
      })
    } else if (data.status === 'pending') {
      apkPending.removeClass('d-none')
      setTimeout(getApkStatus, 5000)
    } else if (data.status === 'none') {
      apkGenerate.removeClass('d-none')
      apkGenerate.click(createApk)
    } else {
      apkGenerate.removeClass('d-none')
    }

    const bgDarkPopupInfo = $('#bg-dark, #popup-info')
    if (bgDarkPopupInfo.length > 0 && data.status === 'ready') {
      bgDarkPopupInfo.remove()
    }
  }

  function createLinks () {
    $('#description').each(function () {
      $(this).html($(this).html().replace(/((http|https|ftp):\/\/[\w?=&./+-;#~%-]+(?![\w\s?&./;#~%"=-]*>))/g, '<a href="$1" target="_blank">$1</a> '))
    })
  }

  function showPreparingApkPopup () {
    const popupBackground = createPopupBackgroundDiv()
    const popupDiv = createPopupDiv()
    const body = $('body')
    const apkSpinner = $('#apk-pb')
    apkSpinner.removeClass('d-none')

    popupDiv.append('<h2>' + apkPreparing + '</h2><br>')
    popupDiv.append(apkSpinner)
    popupDiv.append('<p>' + apkText + '</p>')

    const closePopupButton = '<button id="btn-close-popup" class="btn btn-primary btn-close-popup">' + btnClosePopup + '</button>'
    popupDiv.append(closePopupButton)

    body.append(popupBackground)
    body.append(popupDiv)

    $('#popup-background, #btn-close-popup').click(function () {
      apkSpinner.addClass('d-none')
      popupDiv.remove()
      popupBackground.remove()
    })
  }

  function createPopupDiv () {
    return $('<div id="popup-info" class="popup-div"></div>')
  }

  function createPopupBackgroundDiv () {
    return $('<div id="popup-background" class="popup-bg"></div>')
  }

  function createCookie (name, value, days2expire, path) {
    const date = new Date()
    date.setTime(date.getTime() + (days2expire * 24 * 60 * 60 * 1000))
    const expires = date.toUTCString()
    document.cookie = name + '=' + value + ';' +
      'expires=' + expires + ';' +
      'path=' + path + ';'
  }

  createCookie('referrer', document.referrer, 1, '/')

  function showErrorAlert (message) {
    if (typeof message !== 'string' || message === '') {
      message = 'Something went wrong! Please try again later.'
    }

    Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: message,
      customClass: {
        confirmButton: 'btn btn-primary'
      },
      buttonsStyling: false,
      allowOutsideClick: false
    })
  }

  let $projectLikeCounter, $projectLikeButtons, $projectLikeDetail
  let $projectLikeCounterSmall, $projectLikeButtonsSmall, $projectLikeDetailSmall

  function initProjectLike () {
    let detailOpened = false

    const $container = $('#project-like')

    const $buttons = $('#project-like-buttons', $container)
    const $detail = $('#project-like-detail', $container)
    const $counter = $('#project-like-counter', $container)
    $projectLikeCounter = $counter
    $projectLikeButtons = $buttons
    $projectLikeDetail = $detail

    $buttons.on('click', function () {
      if ($detail.css('display') === 'flex') {
        return
      }
      $detail.css('display', 'flex').hide().fadeIn()
      detailOpened = true
    })
    const $containerSmall = $('#project-like-small')
    const $buttonsSmall = $('#project-like-buttons-small', $containerSmall)
    const $detailSmall = $('#project-like-detail-small', $containerSmall)
    const $counterSmall = $('#project-like-counter-small', $containerSmall)
    $projectLikeCounterSmall = $counterSmall
    $projectLikeButtonsSmall = $buttonsSmall
    $projectLikeDetailSmall = $detailSmall

    $buttonsSmall.on('click', function () {
      if ($detailSmall.css('display') === 'flex') {
        return
      }
      $detailSmall.css('display', 'flex').hide().fadeIn()
      detailOpened = true
    })

    $('body').on('mousedown', function () {
      if (detailOpened) {
        $detail.fadeOut()
        $detailSmall.fadeOut()
        detailOpened = false
      }
    })
    $counter.on('click', { small: false }, counterClickAction)
    $counterSmall.on('click', { small: true }, counterClickAction)
    $detail.find('.btn').on('click', detailsAction)
    $detailSmall.find('.btn').on('click', detailsAction)
  }

  function counterClickAction (event) {
    if (event.data.small) {
      $('#project-reactions-spinner-small').removeClass('d-none')
    } else {
      $('#project-reactions-spinner').removeClass('d-none')
    }
    $.getJSON(likeDetailUrl,
      /** @param {{user: {id: string, name: string}, types: string[]}[]} data */
      function (data) {
        if (!Array.isArray(data)) {
          showErrorAlert()
          console.error('Invalid data returned by likeDetailUrl', data)
          return
        }

        const $modal = $('#project-like-modal')
        const bootstrapModal = new Modal('#project-like-modal')
        const firstTabEl = document.querySelector('#reaction-modal-tab li:first-child button')
        const firstTab = new Tab(firstTabEl)
        firstTab.show()

        const thumbsUpData = data.filter(x => x.types.indexOf('thumbs_up') !== -1)
        const smileData = data.filter(x => x.types.indexOf('smile') !== -1)
        const loveData = data.filter(x => x.types.indexOf('love') !== -1)
        const wowData = data.filter(x => x.types.indexOf('wow') !== -1)

        /**
         * @param type string
         * @param data {{user: {id: string, name: string}, types: string[]}[]}
         */
        const fnUpdateContent = (type, data) => {
          const $tab = /** @type jQuery */ $modal.find('button#' + type + '-tab')
          const $content = $modal.find('#' + type + '-tab-content')
          $content.empty()

          // count
          $tab.find(' > span').text(data.length)

          if (data.length === 0 && type !== 'all') {
            $tab.parent().hide()
            return
          } else {
            $tab.parent().show()
          }

          // tab content
          data.forEach(function (like) {
            const $like = $('<div/>').addClass('reaction')
            $like.append($('<a/>').attr('href', profileUrl.replace('USERID', like.user.id)).text(like.user.name))
            const $likeTypes = $('<div/>').addClass('types')
            $like.append($likeTypes)

            const iconMapping = {
              thumbs_up: 'thumb_up',
              smile: 'sentiment_very_satisfied',
              love: 'favorite',
              wow: 'wow'
            }
            const iconMappingClasses = {
              thumbs_up: 'thumbs-up',
              smile: 'smile',
              love: 'love',
              wow: 'wow'
            }

            like.types.forEach((type) => {
              if (type !== 'wow') {
                $likeTypes.append($('<i/>').addClass('material-icons md-18 ' + iconMappingClasses[type]).append(iconMapping[type]))
              } else {
                const img = document.createElement('IMG')
                img.src = wowBlack
                img.className = 'wow'
                img.id = 'wow-reaction-modal'
                img.alt = 'Wow Reaction'
                $likeTypes.append(img)
              }
            })

            $content.append($like)
          })
        }

        fnUpdateContent('all', data)
        fnUpdateContent('thumbs-up', thumbsUpData)
        fnUpdateContent('smile', smileData)
        fnUpdateContent('love', loveData)
        fnUpdateContent('wow', wowData)
        $('#project-reactions-spinner').addClass('d-none')
        $('#project-reactions-spinner-small').addClass('d-none')

        bootstrapModal.show()
      }).fail(function (jqXHR, textStatus, errorThrown) {
      $('#project-reactions-spinner').hide()
      $('#project-reactions-spinner-small').hide()
      showErrorAlert()
      console.error('Failed fetching like list', jqXHR, textStatus, errorThrown)
    })
  }

  function detailsAction (event) {
    event.preventDefault()
    const action = this.classList.contains('active') ? likeActionRemove : likeActionAdd
    sendProjectLike($(this).data('like-type'), action, $projectLikeButtonsSmall,
      $projectLikeCounterSmall, $projectLikeDetailSmall, true)
    sendProjectLike($(this).data('like-type'), action, $projectLikeButtons,
      $projectLikeCounter, $projectLikeDetail, false)
  }

  function sendProjectLike (likeType, likeAction, likeButtons, likeCounter, likeDetail, smallScreen) {
    const url = likeUrl +
      '?type=' + encodeURIComponent(likeType) +
      '&action=' + encodeURIComponent(likeAction) +
      '&token=' + encodeURIComponent(csrfToken)

    if (userRole === 'guest') {
      window.location.href = url
      return false
    }

    $.ajax({
      url: url,
      type: 'get',
      success: function (data) {
        // update .active of button
        const typeBtn = likeDetail.find('.btn[data-like-type=' + likeType + ']')
        if (likeAction === likeActionAdd) {
          typeBtn.addClass('active')
        } else {
          typeBtn.removeClass('active')
        }
        let iconSize = 'md-28'
        if (smallScreen) {
          iconSize = 'md-24'
        }

        // update like count
        likeCounter.text(data.totalLikeCount.stringValue + ' ' + reactionsText)
        if (data.totalLikeCount.value === 0) {
          likeCounter.addClass('d-none')
        } else {
          likeCounter.removeClass('d-none')
        }

        // update like buttons (behavior like in program.html.twig)
        if (!Array.isArray(data.activeLikeTypes) || data.activeLikeTypes.length === 0) {
          likeButtons.html('<div class="btn btn-primary btn-round d-inline-flex justify-content-center">' +
            '<i class="material-icons thumbs-up ' + iconSize + '">thumb_up</i></div>')
        } else {
          let html = ''

          if (data.activeLikeTypes.indexOf('thumbs_up') !== -1) {
            html += '<div class="btn btn-primary btn-round d-inline-flex justify-content-center">' +
              '<i class="material-icons thumbs-up ' + iconSize + '">thumb_up</i></div>'
          }

          if (data.activeLikeTypes.indexOf('smile') !== -1) {
            html += '<div class="btn btn-primary btn-round d-inline-flex justify-content-center">' +
              '<i class="material-icons smile ' + iconSize + '">sentiment_very_satisfied</i></div>'
          }

          if (data.activeLikeTypes.indexOf('love') !== -1) {
            html += '<div class="btn btn-primary btn-round d-inline-flex justify-content-center">' +
              '<i class="material-icons love ' + iconSize + '">favorite</i></div>'
          }

          if (data.activeLikeTypes.indexOf('wow') !== -1) {
            const img = document.createElement('IMG')
            const div = document.createElement('DIV')
            div.className = 'btn btn-primary btn-round d-inline-flex justify-content-center align-items-center'
            div.id = 'wow-reaction'
            img.src = wowWhite
            img.id = 'wow-reaction-img'
            if (smallScreen) {
              img.id = 'wow-reaction-img-small'
            }
            img.className = 'wow'
            div.append(img)
            html += div.outerHTML
          }
          likeButtons.html(html)
        }
      }
    }).fail(function (jqXHR, textStatus, errorThrown) {
      // on 401 redirect to url to log in
      if (jqXHR.status === 401) {
        window.location.href = url
      } else {
        console.error('Like failure', jqXHR, textStatus, errorThrown)
        showErrorAlert()
      }
    })
  }

  $(function () {
    initProjectLike()
  })
}

$(document).on('click', function (e) {
  const ellipsisContainer = $('#sign-app-ellipsis-container')
  if (!(ellipsisContainer.is(e.target) || $('#sign-app-ellipsis').is(e.target))) {
    ellipsisContainer.hide()
  }
})

$(document).ready(function () {
  $('#sign-app-ellipsis').on('click', function () {
    $('#sign-app-ellipsis-container').show()
  })

  $('#toggle_ads').on('click', function () {
    if ($('#show_ads_chk').is(':checked')) {
      $('#ads_info').show()
    } else {
      $('#ads_info').hide()
    }
  })

  $('#key_store_file').on('change', function () {
    $('#key_store_file_text').val($('#key_store_file').val())
  })
  $('#key_store_file_text').on('click', function () {
    $('#key_store_file').trigger('click')
    $(this).blur()
  })
  $('#key_store_icon').on('click', function () {
    $('#key_store_file').trigger('click')
  })

  $('#key_store_path').on('change', function () {
    $('#key_store_path_text').val($('#key_store_path').val())
  })
  $('#key_file_path_icon').on('click', function () {
    $('#key_store_path').trigger('click')
  })
  $('#key_store_path_text').on('click', function () {
    $('#key_store_path').trigger('click')
    $(this).blur()
  })
  $('#inc_years').on('click', function () {
    const yearsField = $('#key_validity')
    if (yearsField.val() < 99) {
      yearsField.val(parseInt(yearsField.val()) + 1)
    }
  })
  $('#dec_years').on('click', function () {
    const yearsField = $('#key_validity')
    if (yearsField.val() > 0) {
      yearsField.val(parseInt(yearsField.val()) - 1)
    }
  })
})