"use strict";

(function ($) {
  let $this;
  let jsArray = [];
  let formTries = 0;
  let progressTries = 0;
  let listTries = 0;
  let thxTries = 0;
  let langTries = 0;
  let $custDonators;
  let donatorData;
  let donationList = {
    donators: [],
    count: 0,
    sum: 0,
    limit: 0,
    start: 0,
    loaded: 0
  };
  let updateInterval = 0;
  let langDataEN;
  let $bar;
  let $thx;
  let $custDonation;
  let css = ".custom-donation {" + " -webkit-transition: all 300ms ease-in-out;" + "  -o-transition: all 300ms ease-in-out;" + "  transition: all 300ms ease-in-out;" + "  margin-bottom: 100px;" + "}" + ".barometer .text.is-loading {" + "    height: 3em !important;" + "    font-size: 1em !important;" + "    line-height: 1 !important;" + "    padding: 0.5em;" + "}" + ".info {" + "  text-align: center;" + "  padding: 40px 20px;" + "}" + ".loading-spinner {" + "  display: inline-block;" + "  width: 80px;" + "  height: 80px;" + "  margin-bottom: 20px;" + "  border: 6px solid rgba(235, 104, 10, 0.3);" + "  border-radius: 50%;" + "  border-top-color: #eb680a;" + "  animation: spin 1s ease-in-out infinite;" + "  -webkit-animation: spin 1s ease-in-out infinite;" + "}" + ".loading-spinner.small {" + "  width: 2.5em;" + "  height: 2.5em;" + "  margin: 0;" + "}" + "@keyframes spin {" + "  to {" + "    -webkit-transform: rotate(360deg);" + "    transform: rotate(360deg);" + "  }" + "}" + "@-webkit-keyframes spin {" + "  to {" + "    -webkit-transform: rotate(360deg);" + "    transform: rotate(360deg);" + "  }" + "}";
  let style = document.createElement("style");
  document.head.appendChild(style);
  style.appendChild(document.createTextNode(css));

  // ==========================================================================================================
  // COMMON FUNCTIONS
  // ==========================================================================================================
  function detectIE() {
    var ua = window.navigator.userAgent;

    // Test values; Uncomment to check result …

    // IE 10
    // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';

    // IE 11
    ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';

    // Edge 12 (Spartan)
    // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';

    // Edge 13
    // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

    var msie = ua.indexOf("MSIE ");
    if (msie > 0) {
      // IE 10 or older => return version number
      return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)), 10);
    }
    var trident = ua.indexOf("Trident/");
    if (trident > 0) {
      // IE 11 => return version number
      var rv = ua.indexOf("rv:");
      return parseInt(ua.substring(rv + 3, ua.indexOf(".", rv)), 10);
    }
    var edge = ua.indexOf("Edge/");
    if (edge > 0) {
      // Edge (IE 12+) => return version number
      return parseInt(ua.substring(edge + 5, ua.indexOf(".", edge)), 10);
    }

    // other browser
    return false;
  }
  const getParameterByName = name => {
    let url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    let regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return "";
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  };
  const setHtml = (el, content, host) => {
    el.find(".content").html(content);
    if (host && host !== "") {
      if (el.find("[action^='/']").length > 0) {
        el.find("[action^='/']").each(() => {
          const newAction = host + $(this).attr("action");
          $(this).attr("action", newAction);
        });
      }
      if (el.find("[href^='/']").length > 0) {
        el.find("[href^='/']").each(() => {
          const newAction = host + $(this).attr("href");
          $(this).attr("href", newAction);
        });
      }
    }
  };
  const update = () => {
    if (donatorData && donatorData.ui && donatorData.ui !== "0") {
      updateInterval = parseInt(donatorData.ui);
    } else {
      updateInterval = 10000;
    }
    if ($custDonation && $custDonation.length > 0) {
      window.setInterval(() => {
        updateProgressBar();
        getDonatorList();
        checkScrollHeight();
      }, updateInterval);
    } else if ($thx && $thx.length > 0) {
      window.setInterval(() => {
        updateProgressBar();
        checkScrollHeight();
      }, updateInterval);
    }
  };

  // ==========================================================================================================
  // PROMISE VERSION (NOT IE11)
  // ==========================================================================================================
  const loadScriptP = (el, src) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.onload = resolve;
      script.onerror = reject;
      script.src = src;
      document.head.append(script);
    });
  };
  const recursiveScriptChain = (el, srcArray) => {
    const nextSrc = srcArray.shift();
    if (nextSrc) {
      return loadScriptP(el, nextSrc).then(_ => recursiveScriptChain(el, srcArray)).catch(_ => {
        el.find(".info .loading-spinner").slideUp();
        el.find(".info p").text("Das Formular konnte nicht geladen werden.");
      });
    } else {
      return Promise.resolve();
    }
  };

  // ==========================================================================================================
  // IE VERSION
  // ==========================================================================================================
  const loadScriptIE = (src, callback) => {
    const script = document.createElement("script");
    script.type = "text/javascript";
    // IE
    if (script.readyState) {
      script.onreadystatechange = () => {
        if (script.readyState === "loaded" || script.readyState === "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    }
    // Others
    else {
      script.onload = callback;
    }
    script.src = src;
    document.head.appendChild(script);
  };
  const checkJsArray = (el, currentIndex) => {
    const newIndex = currentIndex + 1;
    if (newIndex < jsArray.length) {
      setTimeout(() => {
        loadScriptIE(jsArray[newIndex], checkJsArray(el, newIndex));
      }, 300);
    } else {
      // update fields
      setTimeout(() => {
        // show form
        el.find(".content").slideDown();
        el.find(".info").slideUp();
      }, 300);
    }
  };

  // ==========================================================================================================
  // COMMON FUNCTIONS
  // ==========================================================================================================

  const updateFormInitialization = () => {
    if ($(".custom-donation")) {
      const trackingParameters = ["utm_medium", "utm_campaign", "utm_source", "utm_term", "utm_content", "gclid"];
      trackingParameters.forEach(parameter => {
        let parameterValue = getParameterByName(parameter);
        if (parameterValue !== null) {
          parameterValue = parameterValue.replace(/[^a-zA-Z0-9-_\|\s]/g, "");
          $(".custom-donation").attr("data-" + parameter, parameterValue);
        }
      });
      let ref = document.referrer;
      ref = ref.replace(/[^a-zA-Z0-9-._:?=&\/\s]/g, "");
      $(".custom-donation").attr("data-httpref", ref);
    }
  };
  const checkLanguage = () => {
    if ($(".custom-donation") && $(".custom-donation").attr("data-l") === "en") {
      $(".custom-donation h5").text("The donation form is loading");
      $.ajax({
        type: "get",
        dataType: "json",
        url: "https://www.brot-fuer-die-welt.de" + "/spenden/jetzt-helfen" + "/file/?component=CustomizationFoemi&ft=json&file=en.json",
        success: data => {
          if (data && data.translations) {
            langDataEN = data.translations;
          }
          addDonationForm();
        },
        error: (request, status, error) => {
          if (langTries < 3) {
            setTimeout(() => {
              langTries += 1;
              checkLanguage();
            }, 1000);
          } else {
            addDonationForm();
          }
        }
      });
    } else {
      $(".custom-donation h5").text("Spendenformular wird geladen");
      addDonationForm();
    }
  };

  // ==========================================================================================================
  // FUNCTION FOR DONATION FORM
  // ==========================================================================================================
  const addDonationForm = () => {
    if ($custDonation && $custDonation.length > 0) {
      const elData = $custDonation.data();
      $.ajax({
        type: "get",
        data: elData,
        url: "https://www.brot-fuer-die-welt.de" + "/spenden/jetzt-helfen" + "/geschenk-foerdermitgliedschaft.php?wf=2&t1=-3",
        success: data => {
          setHtml($custDonation, data.content, data.host);
          if (langDataEN) {
            langDataEN.forEach(entry => {
              if (entry.text) {
                if (entry.attr) {
                  $(entry.selector).attr(entry.attr, entry.text);
                } else {
                  $(entry.selector).text(entry.text);
                }
              }
              if (entry.html) {
                $(entry.selector).html(entry.html);
              }
            });
          }

          // add external css
          data.css.reverse();
          $.each(data.css, (index, value) => {
            let allowedToAdd = true;
            if (elData.jq === 0 && value.indexOf("jquery") > -1) {
              allowedToAdd = false;
            }
            if (elData.bs === 0 && value.indexOf("bootstrap") > -1) {
              allowedToAdd = false;
            }
            if (allowedToAdd) {
              let linkElement = document.createElement("link");
              linkElement.type = "text/css";
              linkElement.rel = "stylesheet";
              linkElement.href = value;
              document.head.insertBefore(linkElement, document.head.firstChild);
            }
          });

          // add external js
          if (detectIE !== 11) {
            recursiveScriptChain($custDonation, data.js).then(_ => {
              $custDonation.find(".content").slideDown();
              $custDonation.find(".info").slideUp();
            });
          } else {
            if (data.js.length > 0) {
              jsArray = data.js;
              loadScriptIE(jsArray[0], checkJsArray($custDonation, 0));
            }
          }
          if ($(".spakt-form-short .beitraege")) {
            var $button = $(".spakt-form-short .form-zeile button");
            if ($(".spakt-form-short .beitraege").hasClass("run")) {
              function calcSum() {
                var price = parseFloat($("#cust-donation-run-price").val().replace(",", "."), 10);
                var km = parseFloat($("#cust-donation-run-km").val().replace(",", "."), 10);
                if (!isNaN(price) && !isNaN(km)) {
                  $("#cust-donation-run-sum").val(Math.ceil(price * km));
                }
              }
              $("#cust-donation-run-km").on("keyup", function () {
                calcSum();
              });
              $("#cust-donation-run-price").on("keyup", function () {
                calcSum();
              });
              $button.on("click", () => {
                let text = $("#cust-donation-run-sum").val();
                if (text !== "") {
                  $(".input-field__inputmoney").val(text);
                  window.donation = text;
                }
                $([document.documentElement, document.body]).animate({
                  scrollTop: $(".custom-donation").offset().top - 100
                }, 1000);
              });
            } else {
              //force correct amount input format
              $(".spakt-form-short .form-zeile input[type='text']").change(() => {
                let regex = /^\d+(?:\.\d{0,2})$/;
                let numberString = $(".spakt-form-short .form-zeile input[type='text']").val();
                if (!regex.test(numberString + ".00")) {
                  if (numberString.indexOf(".") !== -1) {
                    numberString = numberString.replace(/\./gi, "");
                  }
                  if (numberString.indexOf(",") !== -1) {
                    numberString = numberString.replace(/,/gi, ".");
                  }
                  if (regex.test(numberString + ".00")) {
                    //Now valid
                    $(".spakt-form-short .form-zeile input[type='text']").val(numberString);
                  } else {
                    //Still not valid. Clear field value completely
                    $(".spakt-form-short .form-zeile input[type='text']").val("");
                  }
                }
              });
              $button.on("click", () => {
                let radio = $(".spakt-form-short .form-zeile input[type='radio']:checked").val();
                let text = $(".spakt-form-short .form-zeile input[type='text']").val();
                if (radio) {
                  $(".input-field__inputmoney").val(radio);
                  window.donation = radio;
                }
                if (text !== "") {
                  $(".input-field__inputmoney").val(text);
                  window.donation = text;
                }
                $([document.documentElement, document.body]).animate({
                  scrollTop: $(".custom-donation").offset().top - 100
                }, 1000);
              });
            }
          }
          $(".spakt-form-short .form-zeile:hidden").slideDown();
        },
        error: (request, status, error) => {
          if (formTries < 3) {
            setTimeout(() => {
              formTries += 1;
              addDonationForm();
            }, 1000);
          } else {
            $custDonation.find(".info .loading-spinner").slideUp();
            $custDonation.find(".info h5").text("Das Spendenformular konnte nicht geladen werden.");
            $custDonation.find(".info").css("background-color", "rgba(255, 0, 0 ,0.1)");
          }
        }
      });
      $custDonation.addClass("init").slideDown();
    }
  };

  // ==========================================================================================================
  // FUNCTION FOR DONATORS
  // ==========================================================================================================
  const getDonatorList = () => {
    $custDonators = $(".custom-donators");
    $("header").addClass("no-bodyfix");
    if ($custDonators && $custDonators.length > 0) {
      donatorData = $custDonators.data();
      donationList.start = donatorData.s;
      donationList.limit = donatorData.l;
      getDonators();
      $custDonators.find(".load-more").on("click", () => {
        donationList.limit += donationList.limit;
        getDonators();
      });
    }
  };
  const checkDonationsInterface = () => {
    $custDonators.find(".current-donations-count").text("" + donationList.count.toLocaleString("de") + " Spenden");
    $custDonators.find(".current-donations-sum").text("" + donationList.sum.toLocaleString("de") + " €");
    let lastElement = "";
    for (let item of donationList.donators) {
      let currentIndex = -1;
      for (var i = 0; i < donationList.donators; ++i) {
        if (donationList.donators[i].id == item.id) {
          currentIndex = i;
          break;
        }
      }
      const d = new Date(item.date);
      const ye = new Intl.DateTimeFormat("en", {
        year: "numeric"
      }).format(d);
      const mo = new Intl.DateTimeFormat("en", {
        month: "2-digit"
      }).format(d);
      const da = new Intl.DateTimeFormat("en", {
        day: "2-digit"
      }).format(d);
      let code = '<div class="list-item donation" id="don-' + item.id + '" style="display:none;"><div class="spender">' + '<p><span class="title">' + item.firstname + " " + item.lastname + '</span> <span class="date">' + da + "." + mo + "." + ye + "</span></p><p>" + item.comment + "</p>" + '</div><div class="betrag">' + item.amount.toLocaleString("de") + " €</div></div>";
      if ($("#don-" + item.id).length < 1) {
        if (lastElement === "") {
          $(code).insertAfter($custDonators.find(".list-item.gesamt"));
          lastElement = "#don-" + item.id;
        } else {
          $(code).insertAfter($custDonators.find(lastElement));
          lastElement = "#don-" + item.id;
        }
      } else {
        lastElement = "#don-" + item.id;
      }
      if (currentIndex >= donationList.limit) {
        $("#don-" + item.id).slideUp().remove();
        donationList.donators.splice(currentIndex, 1);
      }
      $("#don-" + item.id).slideDown();
    }
    donationList.loaded = donationList.donators.length;
    if (donationList.loaded >= donationList.count) {
      $custDonators.find(".load-more").slideUp();
    }
  };
  const getDonators = () => {
    if (donationList.limit > donatorData.l) {
      donatorData.l = donationList.limit;
    }
    const $donatorList = $(".spakt-spenderliste");
    $.ajax({
      type: "get",
      data: donatorData,
      url: "https://www.brot-fuer-die-welt.de" + "/spenden/jetzt-helfen" + "/api/customdonationaction/donators/",
      success: data => {
        donationList.count = data.current.count;
        donationList.sum = data.current.sum;
        donationList.donators = data.donators;
        $donatorList.find(".info").slideUp();
        $donatorList.find(".list-items:hidden").slideDown();
        if (donationList.count !== donationList.donators.length) {
          $donatorList.find(".load-more:hidden").slideDown();
        }
        checkDonationsInterface();
      },
      error: (request, status, error) => {
        if (listTries < 3) {
          setTimeout(() => {
            listTries += 1;
            getDonators();
          }, 1000);
        } else {
          $donatorList.find(".list-items").slideUp();
          $donatorList.find(".load-more").slideUp();
          $donatorList.find(".info .loading-spinner").slideUp();
          $donatorList.find(".info h5").text("Die Spenderliste konnte nicht geladen werden.");
          $donatorList.find(".info").css("background-color", "rgba(255, 0, 0 ,0.1)");
        }
      }
    });
  };

  // ==========================================================================================================
  // FUNCTION FOR PROGRESS
  // ==========================================================================================================
  const updateProgressBar = () => {
    if ($bar && $bar.length > 0) {
      const barData = $bar.data();
      $.ajax({
        type: "get",
        data: barData,
        url: "https://www.brot-fuer-die-welt.de" + "/spenden/jetzt-helfen" + "/api/customdonationaction/current/",
        success: data => {
          $bar.find(".text").fadeOut();
          setTimeout(() => {
            $bar.find(".text").removeClass("is-loading");
            let offlineMoney = 0.0;
            if ($bar.attr("data-offline")) offlineMoney = parseFloat($bar.attr("data-offline"));
            let currentAmount = data.current.sum + offlineMoney;
            if (barData.g && barData.g > 0) {
              $bar.find(".text").html('<span class="current">0</span> € von <span class="goal">0</span> €');
              $bar.find(".current").text(currentAmount.toLocaleString("de"));
              $bar.find(".goal").text(barData.g.toLocaleString("de"));
              let maxWidth = currentAmount / barData.g * 100;
              if (maxWidth > 100) {
                maxWidth = 100;
              }
              $bar.find(".progress").css("width", maxWidth + "%");
            } else {
              $bar.find(".text").html('<span class="current">0</span> €');
              $bar.find(".current").text(currentAmount.toLocaleString("de"));
              if ($bar.attr("data-fix")) {
                if (currentAmount > 0) {
                  $bar.find(".progress").css("width", $bar.attr("data-fix").replace(/[^0-9]/g, "") + "%");
                } else {
                  $bar.find(".progress").css("width", "0%");
                }
              } else {
                $bar.find(".progress").css("width", "100%");
              }
            }
            $bar.find(".text").fadeIn();
          }, 400);
        },
        error: (request, status, error) => {
          if (progressTries < 3) {
            setTimeout(() => {
              progressTries += 1;
              updateProgressBar();
            }, 1000);
          } else {
            $bar.find(".text").html('<span class="current">-</span> €').fadeIn();
          }
        }
      });
    }
  };

  // ==========================================================================================================
  // FUNCTION FOR Thanks
  // ==========================================================================================================
  const checkThanks = () => {
    if ($thx && $thx.length > 0) {
      const thxData = $thx.data();
      $.ajax({
        type: "get",
        data: thxData,
        url: "https://www.brot-fuer-die-welt.de" + "/spenden/jetzt-helfen" + "/api/customdonationaction/thanks/",
        success: data => {
          let js = data.js;
          if (js.tracking && js.tracking !== "") {
            var track = document.createElement("script");
            track.innerHTML = js.tracking;
            document.getElementsByTagName("head")[0].appendChild(track);
          }
          let print = data.print;
          let greeting = "";

          // hide shown error
          $thx.find(".info").slideUp();
          $thx.find(".spakt-share").slideDown();

          // personalise headline
          if (print.data.salutation === "1") {
            greeting = "Vielen Dank für Ihre Unterstützung, Herr " + print.data.name + "!";
          } else if (print.data.salutation === "2") {
            greeting = "Vielen Dank für Ihre Unterstützung, Frau " + print.data.name + "!";
          } else {
            greeting = "Vielen Dank für Ihre Unterstützung, " + print.data.firstname + " " + print.data.name + "!";
          }
          $(".spakt_intro h1").text(greeting).slideDown();

          // add printout
          $thx.find(".spakt-share .form-container").append("<form action='" + print.action + "' method='POST' name='donation_form' class='printform' target='_blank' id='donation_form'></form>");
          if (print.data) {
            for (let [key, value] of Object.entries(print.data)) {
              $thx.find(".spakt-share .form-container form").append("<input type='hidden' name='" + key + "' value='" + value + "'>");
            }
          }
          $thx.find(".spakt-share .form-container form").append("<a class='spendenbest' name='do_print' onclick='this.closest(\"form\").submit();return false;'>Ihre Spendenbestätigung drucken</a>");
        },
        error: (request, status, error) => {
          if (thxTries < 3) {
            setTimeout(() => {
              thxTries += 1;
              updateProgressBar();
            }, 1000);
          } else {
            $(".spakt_intro h1").slideDown();
            $thx.find(".spakt-share").slideUp();
            $thx.find(".info").slideDown();
            $thx.find(".info h5").text("Die Spendenbestätigung konnte nicht geladen werden.");
            $thx.find(".info").css("background-color", "rgba(255, 0, 0 ,0.1)");
          }
        }
      });
    }
  };

  // ==========================================================================================================
  // FUNCTION to set min-height on mobile
  // ==========================================================================================================
  const checkScrollHeight = () => {
    setTimeout(() => {
      if ($("html").outerWidth() < 768) {
        $("html").css("min-height", $("html").outerHeight());
      } else {
        $("html").css("min-height", "");
      }
    }, 500);
  };

  // ==========================================================================================================
  // READY LISTENER
  // ==========================================================================================================
  $(document).ready(() => {
    $custDonation = $(".custom-donation");
    $thx = $(".custom-donation-thanks");
    $bar = $(".barometer");
    updateFormInitialization();
    checkLanguage();
    updateProgressBar();
    if ($custDonation && $custDonation.length > 0) {
      getDonatorList();
      update();
    }
    if ($thx && $thx.length > 0) checkThanks();
    checkScrollHeight();
  });
})(jQuery);