class EdeskSupports {
  #TokenConnect = '';
  #UrlSupport = '';
  #boxSupport = '';
  #TypeSupport = '';
  #IsLoadSupport = false;
  #IsLoadQuestion = false;
  #ObjectSupport = {};
  #IsOpen = false;
  isMobileSupport = false;
  CSAT = '';

  startX = '';
  startY = '';
  startWidth = '';
  startHeight = '';

  constructor() {}

  /**
   *
   * @param {UrlSupport, TypeSupport, IdProduct, IdProject, IdApplication, Token, IsAuthenticated, TypeUser, IsFloat} params
   */
  Init(params) {
    if (!this.#IsLoadSupport) {
      this.#setMobilePlatform();
      this.#ObjectSupport = {
        IdProduct: params.IdProduct ?? null,
        IdProject: params.IdProject ?? null,
        IdApplication: params.IdApplication ?? null,
        tagClient: params.tagClient ?? null,
        TokenMain: params.Token ?? null,
        Token: params.Token ?? null,
        IsAuthenticated: params.IsAuthenticated ?? false,
        TypeUser: params.TypeUser ?? 'EXTERNO',
        IsFloat: params.IsFloat ? true : this.isMobileSupport ? true : false,
      };

      const validate = this.#ValidateParams(params);

      if (validate != '') {
        return alert(validate);
      }

      localStorage.setItem('CONNECT Producto', this.#ObjectSupport.IdProduct);
      localStorage.setItem('CONNECT Proyecto', this.#ObjectSupport.IdProject);
      localStorage.setItem(
        'CONNECT Aplicación',
        this.#ObjectSupport.IdApplication
      );
      localStorage.setItem(
        'CONNECT Cliente',
        sessionStorage.getItem('tagCliente')
      );
      localStorage.setItem('connect_token', this.#ObjectSupport.Token);

      this.#CreateContainerSupport();
      this.#UrlSupport = params.UrlSupport.replace(/\/?$/, '/');

      this.#TypeSupport = params.TypeSupport;
      const scripts = this.#getRoutesJs(params.TypeSupport);
      const css = this.#getRoutesCss(params.TypeSupport);

      this.#loadDynamicCss(css);
      this.loadScriptsNew(scripts, 0, (res) => {
        this.#IsLoadSupport = true;
        if (2 === this.#TypeSupport) {
          updateConnect(
            this.#ObjectSupport.IdProduct,
            this.#ObjectSupport.IdProject,
            this.#ObjectSupport.Token
          );
        }
        const { search } = window.location;
        const urlParam = new URLSearchParams(search);
        let tokenSupport = urlParam.get('token_support');
        if (tokenSupport && 1 === this.#TypeSupport) {
          setTimeout(() => {
            this.ShowContainerSupport({ openSupport: true });
            setTimeout(() => {
              ValidateProdProy();
              openSupportExternal(this.#boxSupport, tokenSupport);
            }, 500);
          }, 1000);
        }
      });
    }
  }

  InitSatisfaction(params) {
    let url = params.url.replace(/\/?$/, '/');
    if (!url.includes('connect')) {
      url = url + 'connect/';
    }
    let versionAds = '?v=' + this.#GenerateVersion();
    this.#loadDynamicCss([`${url}css/satisfaccion.css${versionAds}`]);

    this.#cargarScript(
      `${url}js/satisfaction/satisfaction.js${versionAds}`,
      () => {
        // Una vez que el script se haya cargado, crea un objeto de la clase EdeskSatisfaction
        this.CSAT = new EdeskSatisfaction(url);
      }
    );
  }

  #cargarScript(url, callback) {
    const script = document.createElement('script');
    script.src = url;
    script.onload = callback;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  /**
   *
   * @param {*} idProduct
   * @param {*} idProject
   * @param {*} Token
   */
  Update(idProduct, idProject, token) {
    if (this.#IsLoadSupport === true) {
      if (!idProduct && !idProject && !token) {
        return;
      }

      this.#ObjectSupport.IdProduct = idProduct;
      this.#ObjectSupport.IdProject = idProject;
      this.#ObjectSupport.Token = token;

      localStorage.setItem('CONNECT Producto', idProduct);
      localStorage.setItem('CONNECT Proyecto', this.#ObjectSupport.IdProject);
      localStorage.setItem(
        'CONNECT Cliente',
        sessionStorage.getItem('tagCliente')
      );
      localStorage.setItem('connect_token', token);
      if (this.#TypeSupport == 1) {
        try {
          if (sngConnect) {
            if (sngConnect?.isConnected == true) {
              return;
            }
          }
        } catch {}
        this.#boxSupport.remove();
        this.#CreateContainerSupport();
        this.#ShowSupport();
        if (this.#IsOpen === true) {
          this.ShowContainerSupport();
        }
      } else if (this.#TypeSupport == 2) {
        updateConnect(
          this.#ObjectSupport.IdProduct,
          this.#ObjectSupport.IdProject,
          this.#ObjectSupport.Token
        );
      }
    }
  }

  #ShowSupport() {
    if (this.#IsLoadSupport) {
      try {
        if (this.#TypeSupport === 1) {
          creaSoporteConnect(
            'init',
            this.#ObjectSupport.IdProduct,
            this.#boxSupport,
            this.#ObjectSupport.IdProject,
            this.#ObjectSupport.Token,
            this.#ObjectSupport.IdApplication,
            this.#ObjectSupport.TokenMain,
            this.#ObjectSupport.tagClient
          );
        } else if (
          this.#ObjectSupport.IsAuthenticated &&
          (this.#TypeSupport === 2 ||
            this.#TypeSupport === 3 ||
            this.#TypeSupport === 4)
        ) {
          creaEspera('login', '', this.#boxSupport);
          loginConnect(
            sessionStorage.getItem('tuMfBhBP'),
            sessionStorage.getItem('hrTm4Ch2'),
            sessionStorage.getItem('kses')
          );
        } else {
          creaSoporteConnect(
            'init',
            this.#ObjectSupport.IdProduct,
            this.#boxSupport,
            this.#ObjectSupport.IdProject,
            this.#ObjectSupport.Token,
            this.#ObjectSupport.IdApplication,
            this.#ObjectSupport.TokenMain
          );
        }
        this.#IsLoadQuestion = true;
      } catch {
        this.#IsLoadQuestion = false;
      }
    }
  }

  ShowContainerSupport(params = {}) {
    let areaRightVisible = $('.areaRight').hasClass('visible');

    if (areaRightVisible) {
      if ('function' == typeof ocultaLogin) ocultaLogin();
    }

    if ($('#boxSupportEdesk').hasClass('showContainer')) {
      this.#IsOpen = false;
      $('#boxSupportEdesk').removeClass('showContainer');

      if (this.#ObjectSupport.IsFloat == true) {
        if (this.isMobileSupport) {
          $('#boxSupportEdesk').animate(
            {
              right: '-675px',
            },
            900
          );
        } else {
          $('#boxSupportEdesk').animate(
            {
              right: '-375px',
            },
            400
          );
        }
      } else {
        $('.areaCentral').animate(
          {
            right: '0px',
          },
          400
        );
        $('.areaRight').animate(
          {
            right: '-295px',
            with: '295px',
          },
          400
        );
      }
    } else {
      this.#IsOpen = true;
      $('#boxSupportEdesk').addClass('showContainer');
      if (this.#ObjectSupport.IsFloat == true) {
        if (this.isMobileSupport) {
          $('#boxSupportEdesk').animate(
            {
              right: '0px',
              height: '100%',
              width: '100%',
              top: '40px',
            },
            400
          );
        } else {
          $('#boxSupportEdesk').animate(
            {
              right: '15px',
            },
            400
          );
        }
      } else {
        $('.areaCentral').animate(
          {
            right: '295px',
          },
          400
        );
        if (this.isMobileSupport) {
          $('.areaRight').animate(
            {
              width: '100%',
              right: '0px',
            },
            400
          );
        } else {
          $('.areaRight').animate(
            {
              width: '295px',
              right: '0px',
            },
            400
          );
        }
        $('#boxSupportEdesk').animate(
          {
            right: '0px',
          },
          400
        );
      }
    }
    if (!this.#IsLoadQuestion && !params.openSupport) {
      this.#ShowSupport();
    }
  }

  HideContainerSupport(opt = false) {
    $('.iconConnectON').text('Soporte en Línea');
    $('#boxSupportEdesk').removeClass('showContainer');

    if (!this.#IsOpen) return;

    if (this.#ObjectSupport.IsFloat == true) {
      if (this.isMobileSupport) {
        $('#boxSupportEdesk').animate(
          {
            right: '-675px',
          },
          900
        );
      } else {
        $('#boxSupportEdesk').animate(
          {
            right: '-375px',
          },
          400
        );
        if ($('#boxSupportEdesk').hasClass('showContainer')) {
          $('#boxSupportEdesk').removeClass('showContainer');
        }
      }
    } else {
      $('#boxSupportEdesk').animate(
        {
          right: '-295px',
          with: '0px',
        },
        400
      );
      if (opt) {
        $('.areaCentral').animate(
          {
            right: '0px',
          },
          400
        );
        $('.areaRight').animate(
          {
            right: '-295px',
            with: '295px',
          },
          400
        );
      }
    }
    this.#IsOpen = false;
  }

  async GetFrequentQuestions(params) {
    const DataRequest = {
      IdProd: params.IdProduct,
      IdProy: params.IdProject,
      Token: params.Token,
      Signed: params.Signed,
      IdApp: params.IdApplication ?? this.#ObjectSupport.IdApplication,
      TokenMain: this.#ObjectSupport.TokenMain,
      TagClient: sessionStorage.getItem('tagCliente'),
    };
    try {
      let resultQuestions = await $.ajax({
        url: `${this.#UrlSupport}connect/api/frequent_questions/get`,
        type: 'POST',
        data: DataRequest,
        headers: {
          Authorization: 'Bearer ' + this.#TokenConnect,
        },
      });
      return resultQuestions;
    } catch (error) {
      return Promise.reject(error);
    }
  }

  async AuthenticatedConnect(params) {
    const DataRequest = {
      UserName: params.UserName,
      Password: params.Password,
      Application: params.Application,
      Encrypt: true,
    };
    try {
      let data = await $.ajax({
        url: `${this.#UrlSupport}connect/api/login`,
        type: 'POST',
        data: DataRequest,
      });

      if (parseInt(data.code) == 1) {
        this.#TokenConnect = data.data.Token;
        return this.#TokenConnect;
      } else {
        return false;
      }
    } catch (error) {
      return Promise.reject(error);
    }
  }

  #boxConnectClassic() {
    let boxCon = document.createElement('div');
    boxCon.setAttribute('class', 'containConnect');
    boxCon.setAttribute('id', 'boxSupportEdesk');
    $(boxCon).css('right', '-375px');
    document.getElementsByClassName('contentRight')[0].appendChild(boxCon);
    this.#boxSupport = boxCon;
    this.#detectSwipe('boxSupportEdesk', this.#endTouch);
  }

  #CreateContainerSupport(params) {
    if (this.#ObjectSupport.IsFloat === true) {
      let boxSupport = document.createElement('div');
      boxSupport.setAttribute('class', 'boxSupport');
      boxSupport.setAttribute('id', 'boxSupportEdesk');
      $('body').append(boxSupport);
      this.#boxSupport = boxSupport;

      this.#detectSwipe('boxSupportEdesk', this.#endTouch);
    } else {
      this.#boxConnectClassic();
    }
  }

  initDrag(e) {
    this.startX = e.clientX;
    this.startY = e.clientY;
    this.startWidth = parseInt(
      document.defaultView.getComputedStyle(p).width,
      10
    );
    this.startHeight = parseInt(
      document.defaultView.getComputedStyle(p).height,
      10
    );
    document.documentElement.addEventListener('mousemove', this.doDrag, false);
    document.documentElement.addEventListener('mouseup', this.stopDrag, false);
  }

  doDrag(e) {
    p.style.width = this.startWidth + e.clientX - startX + 'px';
    p.style.height = this.startHeight + e.clientY - startY + 'px';
  }

  stopDrag(e) {
    document.documentElement.removeEventListener(
      'mousemove',
      this.doDrag,
      false
    );
    document.documentElement.removeEventListener(
      'mouseup',
      this.stopDrag,
      false
    );
  }

  // Función para cargar un script
  loadScriptNew(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';

    if (script.readyState) {
      // IE
      script.onreadystatechange = function () {
        if (
          script.readyState === 'loaded' ||
          script.readyState === 'complete'
        ) {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {
      // Otros navegadores
      script.onload = function () {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  // Función recursiva para cargar los scripts uno por uno
  loadScriptsNew(scripts, index, callback) {
    if (index < scripts.length) {
      this.loadScriptNew(scripts[index], () => {
        // Llamada recursiva para cargar el siguiente script
        this.loadScriptsNew(scripts, index + 1, callback);
      });
    }

    if (index == scripts.length - 1) {
      callback(index);
    }
  }

  #GenerateVersion() {
    var date = new Date();
    var dateStr =
      ('00' + (date.getMonth() + 1)).slice(-2) +
      '_' +
      ('00' + date.getDate()).slice(-2) +
      '_' +
      date.getFullYear();
    return dateStr;
  }

  #loadDynamicCss(_css) {
    let head = document.getElementsByTagName('head')[0];
    _css.forEach((href) => {
      if ($('link[href="' + href + '"]').length == 0) {
        let link = document.createElement('link');

        link.rel = 'stylesheet';

        link.type = 'text/css';

        link.href = href + '?v=' + this.#GenerateVersion();

        head.appendChild(link);
      }
    });
  }

  #getRoutesJs(TypeSupport) {
    let RoutesScripts = [];
    let Folder = 'connect';

    let vers = '?v=' + this.#GenerateVersion();

    if (TypeSupport === 1) {
      RoutesScripts = [
        `${this.#UrlSupport}${Folder}/js/jquery.signalR-2.2.2.min.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/usermedia.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/jquery.textarea_autosize.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/connectSignaling.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/soporte.js${vers}`,
        `${
          this.#UrlSupport
        }${Folder}/js/satisfaction/js/satisfaccion.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/getScreenId.js${vers}`,
        // `${this.#UrlSupport}${Folder}/js/new-support/index.js`,
      ];
    } else if (TypeSupport === 2 && this.#ObjectSupport.IsAuthenticated) {
      RoutesScripts = [
        `${this.#UrlSupport}${Folder}/js/jquery.signalR-2.2.2.min.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/usermedia.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/jquery.textarea_autosize.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/connectSignaling.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/connect.js${vers}`,
        `${
          this.#UrlSupport
        }${Folder}/js/satisfaction/js/satisfaccion.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/getScreenId.js${vers}`,
      ];
    } else if (TypeSupport === 3 && this.#ObjectSupport.IsAuthenticated) {
      RoutesScripts = [
        `${this.#UrlSupport}${Folder}/js/jquery.signalR-2.2.2.min.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/usermedia.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/getScreenId.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/jquery.textarea_autosize.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/edoc/connectSignaling.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/edoc/connectSignalingEDOC.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/edoc/connectEDOC_1.0.0.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/edoc/connect.js${vers}`,
      ];
    } else if (TypeSupport === 4 && this.#ObjectSupport.IsAuthenticated) {
      RoutesScripts = [
        `${this.#UrlSupport}${Folder}/js/usermedia.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/jquery.signalR-2.2.2.min.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/getScreenId.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/jquery.textarea_autosize.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/edoc/dekin/connectSignaling.js${vers}`,
        `${
          this.#UrlSupport
        }${Folder}/js/edoc/dekin/connectSignalingEDOC.js${vers}`,
        `${
          this.#UrlSupport
        }${Folder}/js/edoc/dekin/connectEDOC_1.0.0.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/edoc/dekin/connect.js${vers}`,
      ];
    } else {
      RoutesScripts = [
        `${this.#UrlSupport}${Folder}/js/jquery.signalR-2.2.2.min.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/usermedia.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/jquery.textarea_autosize.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/connectSignaling.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/soporte.js${vers}`,
        `${this.#UrlSupport}${Folder}/js/getScreenId.js${vers}`,
        `${
          this.#UrlSupport
        }${Folder}/js/satisfaction/js/satisfaccion.js${vers}`,
      ];
    }
    return RoutesScripts;
  }

  #getRoutesCss(TypeSupport) {
    let Folder = 'connect';

    let RoutesCss = [
      `${this.#UrlSupport}${Folder}/css/InitSupport.css`,
      `${this.#UrlSupport}${Folder}/css/satisfaccion.css`,
    ];

    if (TypeSupport === 1) {
      RoutesCss.push(`${this.#UrlSupport}${Folder}/css/connect.css`);
    } else if (TypeSupport === 2 && this.#ObjectSupport.IsAuthenticated) {
      RoutesCss.push(`${this.#UrlSupport}${Folder}/css/connect.css`);
    } else if (TypeSupport === 3 && this.#ObjectSupport.IsAuthenticated) {
      RoutesCss.push(`${this.#UrlSupport}${Folder}/css/edoc/connect.css`);
    } else if (TypeSupport === 4 && this.#ObjectSupport.IsAuthenticated) {
      RoutesCss.push(`${this.#UrlSupport}${Folder}/css/edoc/connect.css`);
    } else {
      RoutesCss.push(`${this.#UrlSupport}${Folder}/css/connect.css`);
    }
    return RoutesCss;
  }

  #ValidateParams(params) {
    if (!params.TypeSupport) {
      params.TypeSupport = 1;
    }

    if (!params.UrlSupport) {
      return 'Dominio del soporte obligatorio';
    }
    this.#ObjectSupport.TypeUser = !this.#ObjectSupport?.TypeUser
      ? sessionStorage.getItem('tipoUsu')
      : this.#ObjectSupport.TypeUser;
    if (this.#ObjectSupport.TypeUser) {
      this.#ObjectSupport.TypeUser = 'EXTERNO';
    }

    if (sessionStorage.getItem('id_usu_bpm')) {
      this.#ObjectSupport.IsAuthenticated = true;
    } else {
      this.#ObjectSupport.IsAuthenticated = false;
    }

    this.#ObjectSupport.IdProduct = !this.#ObjectSupport?.IdProduct
      ? sessionStorage.getItem('id_prod')
      : this.#ObjectSupport.IdProduct;

    this.#ObjectSupport.IdProject = !this.#ObjectSupport?.IdProject
      ? sessionStorage.getItem('id_proy')
      : this.#ObjectSupport.IdProject;

    this.#ObjectSupport.IdApplication = !this.#ObjectSupport?.IdApplication
      ? sessionStorage.getItem('id_apl')
      : this.#ObjectSupport.IdApplication;

    this.#ObjectSupport.Token = !this.#ObjectSupport?.Token
      ? sessionStorage.getItem('kses')
      : this.#ObjectSupport.Token;

    this.#ObjectSupport.TokenMain = !this.#ObjectSupport?.TokenMain
      ? sessionStorage.getItem('kses')
      : this.#ObjectSupport.TokenMain;

    this.#ObjectSupport.tagClient = !this.#ObjectSupport?.tagClient
      ? sessionStorage.getItem('tagCliente')
      : this.#ObjectSupport.tagClient;

    if (!this.#ObjectSupport.IdProduct) {
      return 'Producto obligatorio';
    }
    if (!this.#ObjectSupport.IdProject) {
      return 'proyecto obligatorio';
    }
    if (!this.#ObjectSupport.IdApplication) {
      return 'Aplicación obligatoria';
    }
    if (!this.#ObjectSupport.Token) {
      return 'Token obligatorio';
    }
    return '';
  }
  #setMobilePlatform() {
    let navegador = navigator.userAgent;
    if (
      navegador.match(/Android/i) ||
      navegador.match(/webOS/i) ||
      navegador.match(/iPhone/i) ||
      navegador.match(/iPad/i) ||
      navegador.match(/iPod/i) ||
      navegador.match(/BlackBerry/i) ||
      navegador.match(/Windows Phone/i)
    ) {
      this.isMobileSupport = true;
    }
  }

  #detectSwipe(el, func) {
    let swipe_det = new Object();
    swipe_det.initX = 0;
    swipe_det.initY = 0;
    swipe_det.finX = 0;
    swipe_det.finY = 0;
    let min_x = 20; //min x swipe for horizontal swipe
    let max_x = 40; //max x difference for vertical swipe
    let min_y = 40; //min y swipe for vertical swipe
    let max_y = 50; //max y difference for horizontal swipe
    let direc = '';
    let ele = document.getElementById(el);
    ele.addEventListener(
      'touchstart',
      function (e) {
        let t = e.touches[0];
        swipe_det.finX = t.screenX;
        swipe_det.initX = t.screenX;
        swipe_det.initY = t.screenY;
      },
      false
    );
    ele.addEventListener(
      'touchmove',
      function (e) {
        let t = e.touches[0];
        swipe_det.finX = t.screenX;
        swipe_det.finY = t.screenY;
        // alert('FIN X ' + swipe_det.initX + ' FIN X ' + swipe_det.finX);
      },
      false
    );
    ele.addEventListener(
      'touchend',
      function (e) {
        let t = e.touches;
        //horizontal detection
        if (
          (swipe_det.finX - min_x > swipe_det.initX ||
            swipe_det.finX + min_x < swipe_det.initX) &&
          swipe_det.finY < swipe_det.initY + max_y &&
          swipe_det.initY > swipe_det.finY - max_y
        ) {
          if (swipe_det.finX > swipe_det.initX) {
            let total = swipe_det.finX - swipe_det.initX;

            if (total > 150) {
              direc = 'r';
            }
          } else direc = 'l';
        }
        //vertical detection
        if (
          (swipe_det.finY - min_y > swipe_det.initY ||
            swipe_det.finY + min_y < swipe_det.initY) &&
          swipe_det.finX < swipe_det.initX + max_x &&
          swipe_det.initX > swipe_det.finX - max_x
        ) {
          if (swipe_det.finY > swipe_det.initY) direc = 'd';
          else direc = 'u';
        }

        if (direc != '') {
          if (typeof func == 'function') func(el, direc);
        }
        direc = '';
      },
      false
    );
  }

  #endTouch(el, d) {
    if (d == 'r') {
      edeskSupports.HideContainerSupport();
    }
  }
}

window.edeskSupports = new EdeskSupports();