var __isChatVisible = false;
var settingsChat = {};
var defaultSettings = {
  headerBackgroundColor: '#fcbe06',
  headerTextColor: '#000000',
  iconBackgroundColor: '#fcbe06',
  iconTextColor: '#000000',
  borderColor: '#fcbe06',
  firstRequestMessage: ''
};

var mystyle = {};

var minimizar = true;

var HttpClient = function () {
  this.get = function (aUrl, aCallback) {
    var anHttpRequest = new XMLHttpRequest();
    anHttpRequest.onreadystatechange = function () {
      if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
        aCallback(anHttpRequest.responseText);
    }
    anHttpRequest.open("GET", aUrl, true);
    anHttpRequest.send(null);
  }
}

function __init_chat_guru() {
  ___init_chat(true);
}

function ___init_chat(initchat) {
  if (initchat === true) {
    console.log("Checking script and parameter...");
    var script = null;
    if (document.currentScript) {
      script = document.currentScript
    } else {
      // IE 11 support.
      var scripts = document.getElementsByTagName('script');
      for (const s of scripts) {
        if (s.src && s.src.indexOf("chat.js") !== -1) {
          script = s;
        }
      }
    }
    if (script && script.src) {
      var url = new URL(script.src);
      const id = url.searchParams.get("id");
      if (id) {
        console.log("ID read from scpt: " + id);
        const paramSettings = {
          minimized: true,
          nc: true,
          assistantName: 'null',
          buttonTextColor: 'null',
          buttonBackgroundColor: 'null',
          headerBackgroundColor: 'null',
          headerTextColor: 'null',
          chatHeight: '500px',
          chatWidth: '300px',
          zindex: 1300,
          pbottomdesktop: '80px',
          prightdesktop: '20px',
          pleftdesktop: 'inherit',
          pbottommobile: '20px',
          prightmobile: '20px',
          pleftmobile: 'revert',
          mode: 'default',
          urlVerSitio: '',
        };
        __populateParamSettings(url, paramSettings);
        var client = new HttpClient();
        var basePath = url.protocol + '//' + url.hostname + (url.port ? ':' + url.port : '');
        client.get(basePath + '/api/Website/mapid/' + id, function(response) {
        const chaturl = basePath + '/widget/chat/' + response + '/' + window.location.hostname
                          + '/' + id
                          + '/' + encodeURIComponent(paramSettings.assistantName)
                          + '/' + encodeURIComponent(paramSettings.buttonBackgroundColor)
                          + '/' + encodeURIComponent(paramSettings.buttonTextColor)
                          + '/' + encodeURIComponent(paramSettings.headerBackgroundColor)
                          + '/' + encodeURIComponent(paramSettings.headerTextColor)
                          + '/' + encodeURIComponent(window.location)
                          + '/' + encodeURIComponent(paramSettings.urlVerSitio);

          const chatClientSettings = basePath + '/website/chat/settings/' + response;
          __loadChat(chaturl, chatClientSettings, paramSettings);
          //const pixelurl = 'https://traficogarantizado.com/pixel/pixel.png?tag=apertura_chat&id=' + encodeURIComponent(id) + '&site=' + encodeURIComponent(window.location);
          //client.get(pixelurl, function(r) { });
        });
      } else {
        console.log("cannot obtain id from chat");
      }
    }
  }
}

window.addEventListener('load', function() {
  var script = null;
  if (document.currentScript) {
    script = document.currentScript
  } else {
    // IE 11 support.
    var scripts = document.getElementsByTagName('script');
    for (const s of scripts) {
      if (s.src && s.src.indexOf("chat.js") !== -1) {
        script = s;
      }
    }
  }
  if (script && script.src) {
    var url = new URL(script.src);
    const id = url.searchParams.get("id");
    if (id) {
      const paramSettings = {
        initChatAutomatically: true,
      };
      __populateParamSettings(url, paramSettings);
      ___init_chat(paramSettings.initChatAutomatically);
    }
  }
})

function __populateParamSettings(url, paramSettings){
    const minimized = url.searchParams.get("minimized");
    const headerBackgroundColor = url.searchParams.get("headerBackgroundColor");
    const headerTextColor = url.searchParams.get("headerTextColor");
    const iconBackgroundColor = url.searchParams.get("iconBackgroundColor");
    const iconTextColor = url.searchParams.get("iconTextColor");
    const borderColor = url.searchParams.get("borderColor");
    const initChatAutomatically = url.searchParams.get("initChatAutomatically");
    const assistantName = url.searchParams.get("assistantName");
    const buttonTextColor = url.searchParams.get("buttonTextColor");
    const buttonBackgroundColor = url.searchParams.get("buttonBackgroundColor");
    const chatHeight = url.searchParams.get("chatHeight");
    const chatWidth = url.searchParams.get("chatWidth");
    const nc = url.searchParams.get("nc");
    const urlVerSitio = url.searchParams.get("u");
    const zindex = url.searchParams.get("zindex");
    const prightmobile = url.searchParams.get("prightmobile");
    const pleftmobile = url.searchParams.get("pleftmobile");
    const pbottommobile = url.searchParams.get("pbottommobile");
    const pbottomdesktop = url.searchParams.get("pbottomdesktop");
    const prightdesktop = url.searchParams.get("prightdesktop");
    const pleftdesktop= url.searchParams.get("pleftdesktop");
    const mode= url.searchParams.get("mode");

    if (minimized){
      paramSettings.minimized = minimized === 'true';
    }
    if (nc){
      paramSettings.nc = nc === 'true';
    }
    if (initChatAutomatically){
      paramSettings.initChatAutomatically = initChatAutomatically === 'true';
    }
    if (headerBackgroundColor){
      paramSettings.headerBackgroundColor = headerBackgroundColor;
    }
    if (headerTextColor){
      paramSettings.headerTextColor = headerTextColor;
    }
    if (iconBackgroundColor){
      paramSettings.iconBackgroundColor = iconBackgroundColor;
    }
    if (iconTextColor){
      paramSettings.iconTextColor = iconTextColor;
    }
    if (borderColor){
      paramSettings.borderColor = borderColor;
    }
    if (assistantName){
      paramSettings.assistantName = assistantName;
    }
    if (buttonTextColor){
      paramSettings.buttonTextColor = buttonTextColor;
    }
    if (buttonBackgroundColor){
      paramSettings.buttonBackgroundColor = buttonBackgroundColor;
    }
    if (chatHeight){
      paramSettings.chatHeight = chatHeight;
    }
    if (chatWidth){
      paramSettings.chatWidth = chatWidth;
    }
    if (urlVerSitio && urlVerSitio !== ""){
      paramSettings.urlVerSitio = urlVerSitio;
    }
    if (zindex){
     paramSettings.zindex = zindex;
    }
    if (pbottommobile){
     paramSettings.pbottommobile = pbottommobile;
    }
    if (prightmobile){
     paramSettings.prightmobile = prightmobile;
    }
    if (pleftmobile){
     paramSettings.pleftmobile = pleftmobile;
    }
    if (pbottomdesktop){
     paramSettings.pbottomdesktop = pbottomdesktop;
    }
    if (prightdesktop){
     paramSettings.prightdesktop = prightdesktop;
    }
    if (pleftdesktop){
     paramSettings.pleftdesktop = pleftdesktop;
    }
    if (mode){
     paramSettings.mode = mode;
    }
}

window.addEventListener('resize', function () {
  //__onresize();
})


function __clean() {
  if (document.getElementById("pguruchatid")) {
    document.getElementById("pguruchatid").remove();
  }
}

function __loadSetting(chatClientSettingsUrl) {
  return fetch(chatClientSettingsUrl).then(function(response) {
    return response.json();
  });
}

function __adjustSettings(settings, paramSettings) {
    if (paramSettings.headerBackgroundColor){
      settings.headerBackgroundColor = paramSettings.headerBackgroundColor;
    }
    if (paramSettings.headerTextColor){
      settings.headerTextColor = paramSettings.headerTextColor;
    }
    if (paramSettings.iconBackgroundColor){
      settings.iconBackgroundColor = paramSettings.iconBackgroundColor;
    }
    if (paramSettings.iconTextColor){
      settings.iconTextColor = paramSettings.iconTextColor;
    }
    if (paramSettings.borderColor){
      settings.borderColor = paramSettings.borderColor;
    }
    if (paramSettings.minimized === true || paramSettings.minimized === false){
      settings.minimized = paramSettings.minimized;
    }
    if (paramSettings.assistantName){
      settings.assistantName = paramSettings.assistantName;
    }
    if (paramSettings.buttonTextColor){
      settings.buttonTextColor = paramSettings.buttonTextColor;
    }
    if (paramSettings.buttonBackgroundColor){
      settings.buttonBackgroundColor = paramSettings.buttonBackgroundColor;
    }
    if (paramSettings.chatHeight){
      settings.chatHeight = paramSettings.chatHeight;
    }
    if (paramSettings.chatWidth){
      settings.chatWidth = paramSettings.chatWidth;
    }
    if (paramSettings.nc){
      settings.nc = paramSettings.nc;
    }
    if (paramSettings.urlVerSitio){
      settings.urlVerSitio = paramSettings.urlVerSitio;
    }
   if (paramSettings.zindex){
     settings.zindex = paramSettings.zindex;
   }
   if (paramSettings.pbottomdesktop){
    settings.pbottomdesktop = paramSettings.pbottomdesktop;
   }
   if (paramSettings.prightdesktop){
    settings.prightdesktop = paramSettings.prightdesktop;
   }
   if (paramSettings.pleftdesktop){
    settings.pleftdesktop = paramSettings.pleftdesktop;
   }
   if (paramSettings.pbottommobile){
    settings.pbottommobile = paramSettings.pbottommobile;
   }
   if (paramSettings.prightmobile){
    settings.prightmobile = paramSettings.prightmobile;
   }
   if (paramSettings.pleftmobile){
    settings.pleftmobile = paramSettings.pleftmobile;
   }
   if (paramSettings.mode){
    settings.mode = paramSettings.mode;
   }
}

function __loadChat(urlChat, chatClientSettingsUrl, paramSettings) {
  __clean();
  __loadSetting(chatClientSettingsUrl).then(function(response) {
    if (response?.data?.settingsInfo?.[0]?.settings) {
      settingsChat = response.data.settingsInfo[0].settings;
    } else {
      settingsChat = defaultSettings;
    }
    __adjustSettings(settingsChat, paramSettings)
    __loadHtml(urlChat, settingsChat);
    __onresize();
  }).catch(function() {
    console.info("No se obtuvo la configuracion del chat");
    __adjustSettings(defaultSettings, paramSettings)
    __loadHtml(urlChat, defaultSettings);
    __onresize();
  });
}

function __setStyles(style, mode){
  const ncDisplay = settingsChat.nc ? 'flex' : 'none';
  const positionFlotante = settingsChat.nc ? 'fixed' : 'static';
  const borderRadius = settingsChat.nc ? '20px' : '0px';
  
  
  const pbottom = window.innerWidth <= 768 ? settingsChat.pbottommobile :settingsChat.pbottomdesktop;
  const pright = window.innerWidth <= 768 ? settingsChat.prightmobile :settingsChat.prightdesktop;
  const pleft = window.innerWidth <= 768 ? settingsChat.pleftmobile :settingsChat.pleftdesktop;
  
  style.innerHTML = '' +
                '.flotante {' +
                '  font: 15px Verdana !important;' +
                '  position: ' + positionFlotante +';' +
                '  bottom: '+ pbottom + ';' +
                '  right: '+ pright + ';' +
                '  left: '+ pleft + ';' +
                '  border-radius: '+ borderRadius +';' +
                '  height: '+ settingsChat.chatHeight + ';' +
                '  width: '+ settingsChat.chatWidth + ';' +
                '  z-index: '+ settingsChat.zindex + ';' +
                '  background-color: #FFFFFF;' +
                '  border: 1px solid ' + settingsChat.borderColor + ';' +
                '  -webkit-box-shadow: 10px 10px 48px -13px rgba(0,0,0,0.75);' +
                '  -moz-box-shadow: 10px 10px 48px -13px rgba(0,0,0,0.75);' +
                '  box-shadow: 10px 10px 48px -13px rgba(0,0,0,0.75);' +
                '} ' +
                '.__chiquito { ' +
                '  height: 52px; ' +
                '  overflow-y: hidden; ' +
                '} '+
                '.div-chico {' +
                '  height: 37px !important;' +
                '} ' +
                '.chat {' +
                '  overflow: hidden;' +
                '} ' +
                'iframe { ' +
                '  background-color: transparent;' +
                '  border-radius: 0 0 20px 20px; ' +
                '} ' +
                '.__oculto { display: none; }' +
                '.__invisible { opacity: 0 !important; }' +
                '.necesitas-ayuda {' +
                '  padding: 13px 10px 10px 10px; ' +
                '  border-bottom: 1px solid #FFFFFF; ' +
                '  border-radius: 20px 20px 0 0; ' +
                '  background-color: ' + settingsChat.headerBackgroundColor + ';' +
                '  display: '+ ncDisplay+ '; ' +
                '  flex-direction: row; ' +
                '  justify-content: space-between; ' +
                '} ' +
                '.flotante-chico { ' +
                '   width: 50px; !importante' +
                '} ' +
                '.boton-minimizar {'+
                '  height: 40px; '+
                '  padding: 0 10px; ' +
                '  font-size: 2rem !important; '+
                '  background-color: transparent; ' +
                '  color: ' + settingsChat.headerTextColor + ';' +
                '  border: 0; ' +
                '  transition: 0.5s; ' +
                '  border-radius: 10px; ' +
                '  cursor: pointer; ' +
                '  text-align: center; ' +
                '} '+
                '.titulo { ' +
                '  width: 230px; ' +
                '  padding-top: 8px; ' +
                '  color: ' + settingsChat.headerTextColor + ';' +
                '} ' +
                '.botonera { ' +
                '  text-align: right; ' +
                '  width: 70px; ' +
                '  margin-top: -4px;' +
                '} ' +
                '__imagen-chat { ' +
                '  cursor: pointer; ' +
                '} ' +
                
                '.necesitas-ayuda.__necesitas-ayuda-chico { ' +
                '  background-color: ' + settingsChat.iconBackgroundColor + ';' +
                '} ' +
                '.svg-color-icon { ' +
                '  color: ' + settingsChat.iconTextColor + ';' +
                '} ';
                
                const mobilecss = '.flotante {' +
                                 '  position: ' + positionFlotante +';' +
                                 '  bottom: '+ pbottom + ';' +
                                 '  right: '+ pright + ';' +
                                 '  left: '+ pleft + ';' +
                                 '  width: inherit;' +
                                 '  height: 100%;' +
                                 '  max-height: 500px; ' +
                                 '} ' +
                                  '.__chiquito { ' +
                                  '  width: 50px; ' +
                                  '  left: '+ pleft + ';' +
                                  '  height: 52px; ' +
                                  '  z-index: '+ settingsChat.zindex + ';' +
                                  '  overflow-y: hidden; ' +
                                  '} ';
                if (mode && mode ==='mobile'){
                  style.innerHTML = style.innerHTML + mobilecss;
                } else {
                  style.innerHTML = style.innerHTML +
                  ' @media (max-width: 768px) {' + mobilecss + ' } ';
                }
}

function __loadHtml(url, settingsChat) {
  __isChatVisible = true;
    this.console.log("Generando iframe")
    var iframe = document.createElement('iframe');
  	iframe.src = url;
    iframe.id = '__chatguru';
    iframe.classList = 'chat'
    iframe.style.display = 'block';
    iframe.style.margin = '0 auto';
    iframe.style.padding = '0';
  	iframe.style.border = '0 none';
    iframe.style.height = '100%';
    iframe.style.width = '100%';
    iframe.frameBorder = "0";
    iframe.scrolling = "no";
    iframe.style.allowtransparency = "true";

    var style = document.createElement('style');
    style.type = 'text/css';
    __setStyles(style, settingsChat.mode);
    document.getElementsByTagName('head')[0].appendChild(style);
    
    mystyle = style;


    var cabecera = document.createElement('div')
    cabecera.id = 'pguruchatid';
    cabecera.classList = 'necesitas-ayuda';
    cabecera.innerHTML = '<div class="titulo">¿Necesitas ayuda?</div>' +
         '<div class="botonera" onresize="__onresize()">' +
             '<button class="boton-minimizar __mini" onClick="__minimizar();">-</button>' +
             '<button class="boton-minimizar __maxi __oculto" onClick="__maximizar();">+</button>' +
         '</div>'+
         
          '<svg version="1.0" xmlns="http://www.w3.org/2000/svg" onClick="__maximizar();"' +
          '   class="__imagen-chat __oculto" ' +
          '  width="400px" height="30px" viewBox="0 0 512.000000 512.000000" '+
          '  preserveAspectRatio="xMidYMid meet"> '+
          '  <g class="svg-color-icon" transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" '+
          '  fill="currentColor" stroke="none"> '+
          '  <path d="M483 4595 c-194 -53 -373 -185 -444 -331 l-34 -69 -3 -1024 c-3 '+
          '  -1141 -6 -1084 66 -1173 88 -111 251 -196 425 -222 42 -6 47 -10 42 -27 -17 '+
          '  -52 -165 -623 -162 -625 1 -1 247 141 545 317 l543 319 1167 0 c1171 0 1292 3 '+
          '  1389 36 150 50 272 152 312 258 l21 57 -2 1053 -3 1052 -38 77 c-72 145 -222 '+
          '  265 -378 302 -93 21 -3365 22 -3446 0z m3368 -326 c43 -9 63 -22 111 -68 l58 '+
          '  -57 0 -986 0 -987 -27 -19 c-16 -11 -51 -27 -79 -36 -46 -15 -189 -16 -1730 '+
          '  -14 l-1679 3 -57 23 c-31 13 -68 32 -82 43 l-26 20 0 974 0 975 52 40 c64 51 '+
          '  117 79 171 90 68 13 3226 12 3288 -1z"/> '+
          '  <path d="M4618 2673 c-3 -771 -5 -832 -22 -883 -43 -128 -107 -207 -213 -261 '+
          '  l-67 -34 -1439 -3 -1439 -2 4 -83 c3 -65 10 -95 33 -142 52 -108 180 -213 322 '+
          '  -262 43 -15 155 -18 1153 -23 l1105 -5 393 -232 c215 -127 392 -227 392 -222 '+
          '  0 5 -25 108 -55 229 -30 121 -55 221 -55 224 0 2 24 7 53 11 88 11 144 34 196 '+
          '  81 62 56 95 112 121 206 20 74 20 93 18 1019 l-3 944 -23 57 c-27 68 -90 135 '+
          '  -153 166 -49 24 -156 41 -256 42 l-62 0 -3 -827z"/> '+
          '  </g> '+
          '</svg> ';

         
    var container = document.createElement('div');
    container.classList = 'flotante __invisible';
    container.appendChild(cabecera);
    container.appendChild(iframe);
    var chatholder = document.getElementById('chatholder');
    if (!chatholder){
      chatholder = document.body;
    }
    chatholder.appendChild(container);
   

  setTimeout(function() {
    container.classList = settingsChat.nc === true ? 'flotante __invisible' : 'flotante';
    if (settingsChat.nc === true){
	    container.classList = 'flotante __invisible';
	    if (window.innerWidth <= 768) {
	      setTimeout(function() {
	        __minimizar();
	      }, 1000);
	    }
    }
    if (window.innerWidth > 768) {
      setTimeout(function() {
        if (settingsChat.minimized === false) {
          container.classList = 'flotante';
        } else {
          if (settingsChat.nc === true){
             __minimizar();
          }
        }
      }, 1000);
    }
  }, 500);
}

function __minimizar() {
  minimizar = true;
  __setStyles(mystyle, settingsChat.mode);  
  document.getElementsByClassName("__mini")[0].classList = "boton-minimizar __mini __oculto";
  if (window.innerWidth <= 768 || settingsChat.mode === 'mobile') {
    document.getElementsByClassName("__imagen-chat")[0].classList = "__imagen-chat";
    document.getElementsByClassName("flotante")[0].classList = "flotante __chiquito flotante-chico";
    document.getElementsByClassName("titulo")[0].classList = "titulo __oculto";
    document.getElementsByClassName("necesitas-ayuda")[0].classList = "necesitas-ayuda __necesitas-ayuda-chico";
  } else {
    document.getElementsByClassName("flotante")[0].classList = "flotante __chiquito";
    document.getElementsByClassName("__maxi")[0].classList = "boton-minimizar __maxi";
  }
}

function __maximizar() {
  minimizar = false;
  __setStyles(mystyle, null);
  document.getElementsByClassName("__imagen-chat")[0].classList = "__imagen-chat __oculto";
  document.getElementsByClassName("flotante")[0].classList = "flotante";
  document.getElementsByClassName("__mini")[0].classList = "boton-minimizar __mini";
  document.getElementsByClassName("__maxi")[0].classList = "boton-minimizar __maxi __oculto";
  document.getElementsByClassName("flotante")[0].classList = "flotante";
  document.getElementsByClassName("necesitas-ayuda")[0].classList = "necesitas-ayuda";  
  if(settingsChat.mode && settingsChat.mode==='mobile' && document.getElementsByClassName("titulo")){
    document.getElementsByClassName("titulo")[0].classList = "titulo";
  }
  if (window.innerWidth <= 768) {
    document.getElementsByClassName("__imagen-chat")[0].classList = "__imagen-chat __oculto";
    document.getElementsByClassName("titulo")[0].classList = "titulo";
   // document.getElementsByClassName("necesitas-ayuda")[0].classList = "necesitas-ayuda";
  }
}

function __onresize() {
  if (minimizar){
    __minimizar();
  }else{
    __maximizar();
  }
  /*
  __setStyles(mystyle, null);
  if (document.getElementsByClassName("__imagen-chat")[0]) {
    if (window.innerWidth <= 768) {
      document.getElementsByClassName("__imagen-chat")[0].classList = "__imagen-chat";
      document.getElementsByClassName("flotante")[0].classList = "flotante __chiquito flotante-chico";
      document.getElementsByClassName("titulo")[0].classList = "titulo __oculto";
    } else {
      document.getElementsByClassName("__imagen-chat")[0].classList = "__imagen-chat __oculto";
    }
  }*/
}