(function() {
  'use strict';
  try {
    const chatWebsiteAddress = new URL('{{{chatWebsiteAddressOrigin}}}');
    if (chatWebsiteAddress.origin !== window.location.origin){
      throw new Error(`Domain "${window.location.origin}"" can't load snippet for '{{{chatWebsiteAddressOrigin}}}'. Please check your website domain in the current XCALLY Chat Website settings.`);
    }
  } catch (error) {
    console.warn(`Domain ${window.location.origin} can't load snippet for '{{{chatWebsiteAddressOrigin}}}'. Please check your website domain in the current XCALLY Chat Website settings.`);
    return;
  }

  // Init all URLs
  const remoteURL = new URL('{{{remote}}}');
  const chatOrigin = remoteURL.origin;
  const chatPath = '/snippet/';
  const chatStylesPath = chatPath + 'styles/';
  const chatVersion = '{{{chatVersion}}}';

  // Style setttings
  const divColor = '<%=div_color%>';
  const textColor = '<%=text_color%>';
  const buttonColor = '<%=button_color%>';
  const backgroungColor = '<%=background_color%>';
  let alignment = "<%=alignment%>";
  let verticalAlignment = "<%=verticalAlignment%>";

  // iframe URL settings
  const iframeId = 'motion-chat-iframe';
  const iframeSrcURL = new URL(chatPath, chatOrigin);
  const iframeSearchParams = new URLSearchParams('{{{query}}}');
  iframeSearchParams.append('version', chatVersion);
  iframeSearchParams.append('location', btoa(window.location.host));
  iframeSrcURL.search = iframeSearchParams;

  // Style URL settings
  const linkURL =  new URL(chatStylesPath + 'mobile.css', chatOrigin);
  linkURL.search = new URLSearchParams({ version: chatVersion });
  const linkMobile = document.createElement('link');
  linkMobile.type = "text/css";
  linkMobile.rel='stylesheet';
  linkMobile.href = linkURL.toString();

  // Iframe localstorage whitelisting
  const allowedOrigins = [chatOrigin];

  function remoteLocalStorageEventHandler(event) {
    if (allowedOrigins.includes(event.origin)) {
      const { action, key, value } = event.data;
      const localStorage = window.localStorage;
      switch(action) {
        case 'setItem': {
            localStorage.setItem(key, JSON.stringify(value))
            event.source.postMessage(
              { action: 'setItemResult', key },
              event.origin
            );
            break;
          }
        case 'getItem': {
          let item = localStorage.getItem(key);
          if (item) {
            try {
              item = JSON.parse(item);
            } catch (error) {
              console.error('Cannot read data from localstorage', error);
            }
          }
          event.source.postMessage(
            { action: 'getItemResult', key, item },
            event.origin
          );
          break;
        }
        case 'removeItem': {
          localStorage.removeItem(key);
          event.source.postMessage(
            { action: 'removeItemResult', key },
            event.origin
          );
          break;
        }
        default:
          typeof action === 'string' && console.debug('Unsupported action', action);
        break;
      }
    }
  }

  // DOM Manipulation
  let iframe = document.createElement('iframe');
  // Attributes
  iframe['id'] = iframeId;
  iframe['src'] = iframeSrcURL.toString()

  let  iframe_status = false;

  document.documentElement.style.setProperty('--xc-ws-div-color', divColor);
  document.documentElement.style.setProperty('--xc-ws-text-color', textColor);
  document.documentElement.style.setProperty('--xc-ws-button-color', buttonColor);
  document.documentElement.style.setProperty('--xc-ws-background-color', backgroungColor);

  document.head.appendChild(linkMobile);
  document.body.appendChild(iframe);

  <% if (alignment == 'bottom_right') { -%>
    // Bottom, right
    iframe.className = 'motion-chat-iframe-bottom_right';
    verticalAlignment = 0;
  <% } else if (alignment == 'right') { -%>
    // Right
    iframe.className = 'motion-chat-iframe-right';
    iframe.style['top'] = verticalAlignment+'%';
    let iframe_h = topIframe_calc();
    topIframe_set(iframe_h);
    let div_tab = document.createElement('div');
    div_tab['id'] = 'motion-chat-iframe-tab';
    div_tab.className = 'motion-chat-div-right';
    let  tab_status=0;
  <% } else if (alignment == 'left') { -%>
    // Left
    iframe.className = 'motion-chat-iframe-left';
    iframe.style['top'] = verticalAlignment+'%';
    let iframe_h = topIframe_calc();
    topIframe_set(iframe_h);
    let  div_tab = document.createElement('div');
    div_tab.className = 'motion-chat-div-left';
    div_tab['id'] ='motion-chat-iframe-tab';
    let tab_status=0;
  <% } -%>   

  <% if (alignment == 'right') { -%>
    // RIGHT
    topChat_set(iframe_h, verticalAlignment);
    document.body.appendChild(div_tab);
    let html = '<div id="chat_tab_arrow"> <strong><</strong> </div> <span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong><%=labelText%></strong></span>';
    div_tab.innerHTML = html;
    
    div_tab.style.backgroundColor = divColor;
    document.getElementById("chat_tab_text").style.color = textColor; 
    document.getElementById("chat_tab_arrow").style.color = divColor;
    document.getElementById("chat_tab_arrow").style.backgroundColor = textColor; 
    document.getElementById("motion-chat-iframe-tab").style.display = "flex";
    
    function appendLink(){
      if(iframe_status == false){
        document.body.appendChild(iframe);
        iframe_status=true;
      }
    }

    function expandChatRight(){
      appendLink();
      div_tab.style.right = '295px';
      iframe.style.right = '0px';
      document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
      let iframeEl = document.getElementById('motion-chat-iframe');
      iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
    }

    function collapseChatRight(){
      appendLink();
      div_tab.style.right = '0px';
      iframe.style.right = '-312px';
      document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
      let iframeEl = document.getElementById('motion-chat-iframe');
      iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
    }

    function toggleChatExpandedRight(){    
      if (tab_status % 2 === 0) {
        expandChatRight();
      }
      else {
        collapseChatRight();
      }
      tab_status++;
    }

    document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedRight);
  <% } else if (alignment == 'left') { -%> 
    // LEFT
    topChat_set(iframe_h, verticalAlignment);
    document.body.appendChild(div_tab);
    let  html='<div id="chat_tab_arrow"> <strong>></strong> </div><span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong><%=labelText%></strong></span>';
    div_tab.innerHTML = html;

    div_tab.style.backgroundColor = divColor;
    document.getElementById("chat_tab_text").style.color = textColor;
    document.getElementById("chat_tab_arrow").style.color = divColor;
    document.getElementById("chat_tab_arrow").style.backgroundColor = textColor; 
    document.getElementById("motion-chat-iframe-tab").style.display="flex";

    function appendLink() {
      if (iframe_status == false){
        document.body.appendChild(iframe);
        iframe_status=true;
      }
    }

    function expandChatLeft() {
      appendLink();
      div_tab.style.left = '295px';
      iframe.style.left = '0px';
      document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
      let iframeEl = document.getElementById('motion-chat-iframe');
      iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
    }

    function collapseChatLeft() {
      appendLink();
      div_tab.style.left = '0px';
      iframe.style.left = '-312px';
      document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
      let iframeEl = document.getElementById('motion-chat-iframe');
      iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
    }

    function toggleChatExpandedLeft() {
      if (tab_status % 2 === 0) {
        expandChatLeft();
      }
      else {
        collapseChatLeft();
      }
      tab_status++;
    }

    document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft); 
  <% } -%>

  // START Events management
  window.addEventListener(
    'message',
    function(evt) {
      remoteLocalStorageEventHandler(evt)
      switch (evt.data.cmd) {
        case 'show':
          <% if (alignment == 'bottom_right') { -%>
            // Bottom, right
            iframe.style.top = 'auto';
            iframe.style.bottom = '0px';
          <% } else if (alignment == 'right') { -%>
            // Right
            iframe.style.right = '0px';
            div_tab.style.right = '295px';
          <% } else if (alignment == 'left') { -%>
            // Left
            iframe.style.left = '0px';
            div_tab.style.left = '295px';
          <% } -%>
          break;
        case 'hide':
          <% if (alignment == 'bottom_right') { -%>
            // Bottom, right
            iframe.style.top = 'calc(100% - 50px)';
          <% } else if (alignment == 'right') { -%>
            // Right
            iframe.style.right = '-312px';
            div_tab.style['right'] = '0px';
          <% } else if (alignment == 'left') { -%>
            // Left
            iframe.style.left = '-312px';
            div_tab.style.left = '0px';
          <% } -%>
          break;
        case "init": 
          <% if (alignment == 'right' || alignment == 'left') { -%>
            // Bottom, right
            div_tab.style.backgroundColor = divColor;
            document.getElementById("chat_tab_text").style.color = textColor; 
            document.getElementById("chat_tab_arrow").style.color = divColor; 
            document.getElementById("chat_tab_arrow").style.backgroundColor = textColor; 
            document.getElementById("motion-chat-iframe-tab").style.display = "flex";
          <% } -%>
          break;
        case "offline": 
          <% if (alignment == 'right' || alignment == 'left') { -%>
            // Bottom, right
            document.getElementById("motion-chat-iframe-tab").style.display = "none";
          <% } -%>
          break;
        default:
      }
    },
    false
  );
  // END Events management

  // START Proactive action management
  <% proactiveActions.forEach(function(action, index) { -%>
    <% if (action.type == 'timeout') { -%>        
    setTimeout(function() {
      <% if (alignment == 'right') { -%>
        expandChatRight();
        tab_status++;
      <% } else if (alignment == 'left') { -%> 
        expandChatLeft();
        tab_status++;
      <% } else { -%> 
        iframe.style.bottom = '0px';
        iframe.contentWindow?.postMessage({
            evt: 'show'
        }, '*');
      <% } -%> 
    }, <%- action.timeout %> * 1000);
  <% } -%>
  <% if (action.type == 'mouseOver') { -%>
  let elements<%- index %> = document.querySelectorAll("<%- action.selector %>");
  for (let i = 0; i < elements<%- index %>.length; i++) {
    elements<%- index %>[i].onmouseover = function() {
      <% if (alignment == 'right') { -%>
        expandChatRight();
        tab_status++;
      <% } else if (alignment == 'left') { -%> 
        expandChatLeft();
        tab_status++;
      <% } else { -%> 
        iframe.style.bottom = '0px';
        iframe.contentWindow?.postMessage({
            evt: 'show'
        }, '*');
      <% } -%> 
    }
  }
  <% } -%>    <% }); -%>
  // END Proactive action management

  if (window.DeviceOrientationEvent) {
    window.addEventListener(
      'orientationchange',
      function() {
        if (alignment == 'right') {
          document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
          let iframeEl = document.getElementById('motion-chat-iframe');
          iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
          tab_status = 0;
          iframe_h = topIframe_calc();
          topIframe_set(iframe_h);
          if (typeof div_tab != "undefined") {
            topChat_set(iframe_h, verticalAlignment);
          }
        }
        else if (alignment == 'left') {
          document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
          let iframeEl = document.getElementById('motion-chat-iframe');
          iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
          tab_status = 0;
          iframe_h = topIframe_calc();
          topIframe_set(iframe_h);
          if (typeof div_tab != "undefined") {
            topChat_set(iframe_h, verticalAlignment);
          }
        }
      },
      false
    );
  }

  window.addEventListener(
    "resize",
    function(event) {
      let iframe_h = topIframe_calc();
      topIframe_set(iframe_h);
      if(typeof div_tab != "undefined") {
        topChat_set(iframe_h, verticalAlignment);
      }
    }
  );

  function topIframe_calc(){
    let height_iframe
    let heightD = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    let iframeT = ((heightD/100)*verticalAlignment) + 450;
    if (heightD < iframeT) {
      height_iframe = 450 - (iframeT - heightD);
    }
    else {
      height_iframe = 450;
    }
    return height_iframe;
  }

  function topIframe_set(height_iframe) {
    if (height_iframe > 340) {
      iframe.style['height'] = height_iframe +'px';
      if (alignment == "right" || alignment == "left") {
        iframe.style['top'] = verticalAlignment + "%";
      }
      else {
        iframe.style['bottom'] = "0%";
      }
    }
    else {
      iframe.style['height'] = '340px';
      if (alignment == "right" || alignment == "left") {
        iframe.style['top'] = "calc(100% - 340px)";
      }
      else {
        iframe.style['bottom'] = "0%";
      }
    }
  }

  function topChat_set(height_iframe, verticalAlignment) {
    if (height_iframe > 340) {
        div_tab.style['top'] = "calc("+ verticalAlignment +"% + " + (height_iframe - 100) + "px)";
    }
    else {
      div_tab.style['top'] = "auto";
      div_tab.style['bottom'] = "0px";
    }
  }

  // hide chat
  <% if (hideWhenOffline && intervalId != null) { -%>
    // hide template
    document.getElementById("motion-chat-iframe-tab").style.display = "none";
  <% } -%>
}());