console.log("starting chat bot template");

// don't load again if already loaded
/*if (typeof dynamicallyLoadJQuery !== "undefined") {
  console.log("chat bot already loaded: " + typeof dynamicallyLoadJQuery);
} else*/ {

// runnable: function($)
function dynamicallyLoadJQuery(runnable) {
  console.log("document.jQuery: " + document.jQuery);
  console.log("$: " + (typeof $ === 'undefined' ? "none" : $));
  if (document.jQuery != null)
    jQuery(document).ready(runnable);
  else if (typeof $ !== 'undefined')
    $(document).ready(runnable);
  else {
    console.log("need to load jquery");
    var script = document.createElement("SCRIPT");
    script.src = 'https://code.jquery.com/jquery-1.10.2.js';
    script.type = 'text/javascript';
    script.onload = function() {
      console.log("jquery loaded");
      jQuery(document).ready(runnable);
    };
    document.getElementsByTagName("head")[0].appendChild(script);
  }
}

var chatBot_autoOpen = #AUTOOPEN#;
var chatBot_n = #N#;
var chatBot_interval = 1000;
var chatBot_nInitial = chatBot_n;
var chatBot_showActions = false;
var chatBot_language = "";
var chatBot_started = false;
var chatBot_cookie = localStorage.getItem('chatbot-cookie');
var chatBot_notificationsOn = true;
var chatBot_justStarted = true;

// polyfill for URLSearchParams

(function (w) {
  w.URLSearchParams = w.URLSearchParams || function (searchString) {
      var self = this;
      self.searchString = searchString;
      self.get = function (name) {
          var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
          if (results == null) {
              return null;
          }
          else {
              return decodeURI(results[1]) || 0;
          }
      };
  }
})(window);

const urlParams = new URLSearchParams(window.location.search);
const botEnable = urlParams.get('bot');
var botConfig = botConfig || urlParams.get('_botConfig');

// allow cookie override in URL
var cookie2 = urlParams.get('cookie');
if (urlParams.get("_newBotCookie") == "1") {
  chatBot_cookie = "conv-" + Math.random().toString(36).substr(2, 9);
  console.log("New cookie made >> " + chatBot_cookie);
}

if (cookie2) {
  chatBot_cookie = cookie2;
  console.log("Cookie override >> " + cookie2);
}

if (#BOT_ON# || botEnable == "1") {

console.log("cookie 1: " + chatBot_cookie);
if (!chatBot_cookie) {
  chatBot_cookie = Math.random().toString(36).substr(2, 9);
  localStorage.setItem('chatbot-cookie', chatBot_cookie);
  console.log("cookie 2: " + chatBot_cookie);
}

// workaround to get $ from wordpress version of jQuery
dynamicallyLoadJQuery(function ($) {
  // from here on we have JQuery
  console.log("loading 2");
  
  // helper for inserting emojis

  $.fn.insertIntoTextArea = function(textToInsert) {
    return this.each(function () {
      var txt = $(this);
      var cursorPosStart = txt.prop('selectionStart');
      var cursorPosEnd = txt.prop('selectionEnd');
      var v = txt.val();
      var textBefore = v.substring(0,  cursorPosStart);
      var textAfter  = v.substring(cursorPosEnd, v.length);
      txt.val(textBefore + textToInsert + textAfter);
      txt.prop('selectionStart', cursorPosStart + textToInsert.length);
      txt.prop('selectionEnd', cursorPosStart + textToInsert.length);
      txt.focus();
    });
  };

  function dynamicallyLoadScript(url, onload, asModule) {
    var script = document.createElement("script");
    script.src = url;
    script.onload = onload;
    if (asModule) script.type = "module";
    document.head.appendChild(script);
  }
  
  function dynamicallyLoadModule(code) {
    var script = document.createElement("script");
    script.type = "module";
    script.appendChild(document.createTextNode(code));
    document.head.appendChild(script);
  }
  
  function loadStyleSheet(url, onLoad) {
    var link = document.createElement('link');
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("type", "text/css");
    link.onload = onLoad;
    link.setAttribute("href", url);
    document.head.appendChild(link);
  }
  
  // load fonts & style sheets
  
  loadStyleSheet("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css");
  loadStyleSheet("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
  
  // intTelInput.min.css
  loadStyleSheet("https://botcompany.de/serve/1029819?ct=text/css");

  // intlTelInput.min.js
  dynamicallyLoadScript("https://botcompany.de/serve/1029820?ct=text/javascript", function() {
    window.telInput = document.querySelector("#chat_telephone");
    console.log("telInput: " + telInput);
    window.telHandler = window.intlTelInput(window.telInput, {
      utilsScript: "https://botcompany.de/serve/1029822?ct=text/javascript", 
      preferredCountries: ["in", "gb"],
      separateDialCode: true,
      initialCountry: "#COUNTRY#"
    });
  });

  /*dynamicallyLoadScript("https://gazelle.rocks/emoji-picker/index.js", function() {
    console.log("emoji picker loaded");
    
    dynamicallyLoadModule(`
      import { EmojiButton } from "https://gazelle.rocks/emoji-picker/index.js";
  
      const picker = new EmojiButton();
      const trigger = document.querySelector('#bot-emoji-trigger');
  
      picker.on('emoji', selection => {
        console.log(selection.emoji);
        $("#chat_message").insertIntoTextArea(selection.emoji);
        setTimeout(function() {
          $("#chat_message").focus();
        }, 250);
      });
  
      trigger.addEventListener('click', () => picker.togglePicker(trigger));
    `);
  }, true);*/
  
  loadStyleSheet("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css");
  loadStyleSheet("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");

  var shouldOpenBot = false, styleSheetLoaded = false;
  
  // bot styles
  loadStyleSheet("https://pays5.com/text/#CSS_ID#?ct=text%2Fcss", function() {
    if (!styleSheetLoaded) {
      console.log("style sheet loaded");
      styleSheetLoaded = true;
      $('.chatbot').show(); // show opener
      if (shouldOpenBot) chatBot_actualOpen();
      if (typeof chatBotLoadedCallback !== 'undefined')
        chatBotLoadedCallback();
    }
  });

  // scripts for bot
  
  window.chatBot_isOpen = function() {
    const chatCloseIcon = document.querySelector(".chat-btn .close-icon");
    return !chatCloseIcon.classList.contains("hide");
  }
  
  window.chatBot_toggle = function() {
    const chatCommentIcon = document.querySelector(".chat-btn .comment-icon");
    const chatCloseIcon = document.querySelector(".chat-btn .close-icon");
  
    var openerText;
    if (!chatBot_isOpen()) {
      chatCommentIcon.classList.add("hide");
      chatCloseIcon.classList.remove("hide");
      chatBot_open();
      openerText = "Send Message";
    } else {
      chatCloseIcon.classList.add("hide");
      chatCommentIcon .classList.remove("hide");
      $('.chat').removeClass('is-visible');
      openerText = "Open Chat Bot";
    }
    $('.chat-btn').attr("title", openerText);
  }

  window.chatBot_open = function() {
    shouldOpenBot = true;
    if (styleSheetLoaded) chatBot_actualOpen();
  }
  
  function chatBot_actualOpen() {
    console.log("Opening chat bot");
    $('.chat').addClass('is-visible');
    $('#chat_message').focus();
    if (!chatBot_started) {
      chatBot_started = true;
      try {
        if (window.GTranslateGetCurrentLang)
          chatBot_language = window.GTranslateGetCurrentLang();
        console.log("lang: " + chatBot_language);
      } catch (err) {
        console.log(err);
      }

      chatBot_start();
    }
  }
  
  function chatBot_showAction(action) {
    console.log(action);
  }
    
  window.chatBot_appendAction = function(action) {
  };
  
  window.chatBot_hideAction = function() {
  };
  
  function standardParams() {
    return "&cookie=" + chatBot_cookie + "&rand=" + Math.random() + (!botConfig ? "" : "&_botConfig=" + encodeURIComponent(botConfig));
  }
  
  window.chatBot_start = function() {
    var url = "#INCREMENTALURL#";
    if (url != '' && url != ("#INC" + "REMENTALURL#")) {
      url += chatBot_n + standardParams();
      if (chatBot_language) url += "&language_default=" + chatBot_language;
      if (chatBot_justStarted) {
        url += "&message=!new+dialog";
        chatBot_justStarted = false;
      }
      chatBot_showAction("Loading " + url);
      $.get(url, function(src) {
        chatBot_showAction("Loaded " + src.length + " chars");
        var match = src.match(/\d+/);
        if (match != null) {
          var newN = parseInt(match[0]);
          if (src.match(/NEW DIALOG -->/)) {
            //var noNotify = src.match(/NO NOTIFY NEW DIALOG -->/);
            /*console.log("noNotify=" + noNotify);
            if (noNotify)
              $("#chat_converse").addClass('notransition');*/
            $("#chat_converse").html(src);
            /*if (noNotify) {
              $("#chat_converse").offsetHeight; // Trigger a reflow
              $("#chat_converse").removeClass('notransition'); // Re-enable transition
            }*/
          } else {
            // hide old buttons and special input fields
            $(".chat_buttons, .chat-button-span, .chatbot-choice-button").hide();
            $("#chat_telephone, .iti").hide();
            $("#chat_message").show();
            // now append new stuff
            $("#chat_converse").append(src);
          }
          var oldN = chatBot_n;
          chatBot_n = newN;
          $("#chat_converse").scrollTop(1000000);
          chatBot_showAction("Appended " + src.length);
          console.log(src);
        } else
          chatBot_showAction("chatBot_n=" + chatBot_n + " (initial=" + chatBot_nInitial + ")");
        chatBot_appendAction("Rescheduling");
        //var interval = src == '' ? chatBot_interval*10 : chatBot_interval; // slowdown when bug
        var interval = chatBot_interval;
        setTimeout(chatBot_start, interval);
        chatBot_appendAction("Rescheduled");
      }, 'text')
        .fail(function() {
          chatBot_showAction("Rescheduling after fail");
          setTimeout(chatBot_start, chatBot_interval);
        });
    }
  };

  // also focuses input field  
  window.chatBot_setInput = function(text, placeholder) {
    if (placeholder == '') placeholder = "Type a message...";
    $('#chat_message')
      .attr('placeholder', placeholder);
    if (text)
      $('#chat_message').val(text).select().focus();
  };
  
  window.allowEmptyMsg = false;
  
  window.submitAMsg = function(msg) {
    if (!window.allowEmptyMsg && msg == "") return;
    chat_message.value = msg;
    submitMsg();
  };
  
  window.submitMsg = function() {
    var msg = chat_message.value;
    
    if ($("#chat_telephone").is(":visible") && !/^!/.test(msg))
      msg = window.telHandler.getNumber();

    var url = '#MSGURL#' + encodeURIComponent(msg) + standardParams();
    if (chatBot_language) url += "&language_default=" + chatBot_language;
    chatBot_showAction('Submitting ' + url);
    $.get(url);
    chat_message.value = '';
  };
  
  window.playChatNotification = function() {
    if (window.chatNotificationWav == null) {
      console.log("Loading notification wav");
      window.chatNotificationWav = new Audio("#NOTIFICATIONSOUND#");
      if ("#WORKERMODE" != "true")
        window.chatNotificationWav.volume = 0.5;
    }
    console.log("Playing notification mp3");
    window.chatNotificationWav.play();
  };
  
  var originalTitle;
  
  window.setTitleStatus = function(status) {
    if (originalTitle == null)
      originalTitle = document.title;
    if (!document.hasFocus() || document.activeElement !== document.getElementById('chat_message')) {
      if (status) status = status + " ";
    } else status = "";
    document.title = status + originalTitle;
  };
  
  function resetTitle() {
    window.setTitleStatus("");
  }
  
  window.onfocus = resetTitle;
  $('#chat_message').on("focus", resetTitle);
  
  var sendTyping_sent = 0, sendTyping_interval = 5000;
  window.sendTyping = function() {
    var time = Date.now();
    if (time > sendTyping_sent+sendTyping_interval) {
      sendTyping_sent = time;
      var url = "#TYPINGURL#" + standardParams();
      console.log("Loading " + url);
      $.get(url);
    }
  };
  
  window.notiToggle = function() {
    submitAMsg('!toggle notifications');
    var text = $("#chatBot_notiToggleText");
    text.text("Turn " + (/Turn on/.test(text.text()) ? "off" : "on") + " notifications");
  };
  
  var typingCounter = 0, showTyping_interval = 3000;
  window.showTyping = function() {
    console.log("showTyping " + typingCounter);
    typingCounter++;
    if (typingCounter == 1)
      $('#otherSideTyping').css('display', 'block');
    setTimeout(function() {
      console.log("showTyping end " + typingCounter);
      if (--typingCounter <= 0)
        $('#otherSideTyping').css('display', 'none');
    }, showTyping_interval);
  };
  
  window.chat_keyDown = function(event) {
    if (event.keyCode == 13) { submitMsg(); return false; }   
    else if (event.keyCode >= 32 && event.keyCode < 128) sendTyping();
  };
  
  console.log("defined functions");
  
  $('body').append(`

  <div aria-live="polite" aria-atomic="true" aria-relevant="all" id="screenreadertrick"></div>
  <div class="chatbot" style="display: none">
      <div class="chat-box" role="region" aria-labelledby="tchat-label">
          <h1 id="tchat-label" class="sr-only" tabindex="-1">Chat window</h1>
          <div class="chat">
          <div class="main-header">
              <div class="chat_header">
              <div class="four-people" style="
                ">
                <div class="users user-1"></div>
                <div class="users user-2"></div>
                <div class="users user-3"></div>
                <div class="users user-4"></div>
                
                </div>
                  <img src="#BOTIMG#" class="header-user">
                  <h2>$HEADING</h2>
                  <div class="buttons">
                  <!--<button class="fas fa-ellipsis-v"></button>-->
                  <label class="head-dropdown">
                    <div class="head-button">
                      <i class="fas fa-ellipsis-v"></i>
                    </div>
                  
                    <input type="checkbox" class="head-input" id="test">
                  
                    <ul class="head-menu">
                      <li onclick="notiToggle()"><i class="far fa-bell-slash"></i><span id="chatBot_notiToggleText">Turn off notifications</span></li>
                      <li onclick="submitAMsg('!rate conversation')"><i class="fas fa-star"></i>Rate this conversation</li>
                    </ul>
                    
                  </label>
                  <button id="" class="fas fa-chevron-down" title="Close Chat Bot" onclick="chatBot_toggle()"></button>
                  </div>
              </div>
              <div class="header-bottom" style="display: none">
<span class="online">We're online! </span>
</div>
</div>
              <div id="chat_converse" class="chat_conversion chat_converse" tabindex="0" aria-live="polite">
              </div>
              <div id="otherSideTyping" aria-hidden="true" style="display: none">
                  <h4 class="sr-only">#OTHERSIDE# typing</h4>
                  <span class="joining"></span>
                  <span class="dot"></span>
                  <span class="dot"></span>
                  <span class="dot"></span>
              </div>
              <div class="chat-bottom">
                  <!--<a class="camera-icon"><i class="fas fa-camera"></i></a>-->
                  <!--<a class="send-icon" title="Send this message" aria-label="Send"><i class="fas fa-paper-plane"></i></a>-->
                  
                  <textarea id="chat_message" class="chat_field chat_message" title="Message to send" aria-label="message to send" placeholder="Type a message..." rows="10" cols="30" name="message" onkeydown="return chat_keyDown(event);"></textarea>
                  <input type="tel" id="chat_telephone" style="display: none" onkeydown="return chat_keyDown(event);">

                  <div class="footer-bottom">
                    <ul>
    <!--    <li>
    <a href="#" onclick="submitAMsg('!new dialog'); return false;" class="play-icon" title="Restart Chat Bot"><i class="fa fa-play"></i></a>
        </li>-->
<!--<li>
    <a href="#" id="bot-emoji-trigger"><i class="far fa-smile-beam"></i></a>
        </li> -->

    </ul>
                  </div>
              </div>
          </div>
          <a href="#" id="chat-btn" class="chat-btn" title="Open Chat Bot" onclick="if (chatBot_isOpen()) submitMsg(); else chatBot_toggle(); return false;">
            <div class="comment-icon">
              <i class="fas fa-comment-dots"></i>
              <i class="fas fa-pencil-alt"></i>
            </div>
            <div class="close-icon hide"><i class="fas fa-paper-plane"></i></div>
        </a>

      </div>
  </div>
  `);
  
  // design javascripts
  
  /*$('.chat-icon').click(function() {
    chatBot_open();
  });*/

  // for skip link
  $("a[href='#chatbot']").click(chatBot_open);

  // design javascripts end
  
  //MOREINIT
  
  console.log("done init");
  // onLoad
  if (chatBot_autoOpen) {
    console.log("auto-opening chat bot");
    //window.addEventListener('DOMContentLoaded', chatBot_open, false);
    chatBot_toggle();
  }
  
  // end of bot scripts
});

} // if botEnable
} // if not already loaded