/**
 * This code creates a support/live chat widget using Clientify.
 * The widget is dynamically inserted into the web page and configured with parameters
 * passed through the URL. Additionally, events to open and close the widget are handled.
 *
 * @Author: Clientify
 * @Version: 1.0
 * _     _____     _______ ____ _   _    _  _____
 *| |   |_ _\ \   / / ____/ ___| | | |  / \|_   _|
 *| |    | | \ \ / /|  _|| |   | |_| | / _ \ | |
 *| |___ | |  \ V / | |__| |___|  _  |/ ___ \| |
 *|_____|___|  \_/  |_____\____|_| |_/_/   \_\_|
 *
 */

 (function() {
  // Check if WidgetManager instance already exists
  
  if (window.widgetManagerInstance) {
    return;
  }

  function WidgetManager() {
    this.sourceId     = '';
    this.channelId    = '';
    this.id           = '';
    this.apiKey       = '';
    this.vk           = '';
    this.widget_position = '';
    
    const style = document.createElement('style');
    const css = `
        .no-scroll {
            overflow: hidden !important;
            touch-action: none !important; 
        }
    `;
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);

    this.toggleScroll = function(enable) {
        if (enable) {
            document.body.classList.remove('no-scroll');
        } else {
            document.body.classList.add('no-scroll');
        }
    };
  
    this.containerDiv = document.createElement("div");
    this.iframe       = document.createElement("iframe");
    this.iframeBtn    = document.createElement("iframe");
}

  WidgetManager.prototype.init = function() {
    const paramszclienty  = new URLSearchParams(document.currentScript.src.split("?")[1]);
    this.sourceId         = paramszclienty.get('source_id');
    this.channelId        = paramszclienty.get('channel_id');
    this.id               = paramszclienty.get('id');
    this.apiKey           = paramszclienty.get('apiKey');
    this.vk               = this.getCookie('vk');

    document.addEventListener('DOMContentLoaded', () => {
      this.setupWidget();
      this.applyClosedStylesIn();
      this.applyClosedStyles();
      this.attachEventListeners();
    });
  };

  WidgetManager.prototype.getCookie = function(name) {
    const nameEQ  = name + "=";
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i];
        while (cookie.charAt(0) === ' ') {
            cookie = cookie.substring(1, cookie.length);
        }
        if (cookie.indexOf(nameEQ) === 0) {
            return cookie.substring(nameEQ.length, cookie.length);
        }
    }
    return null;
  };

  WidgetManager.prototype.applyClosedStyles = function() {
    this.iframe.style.width       = window.innerWidth > 768 ? "430px" : "300px";
    this.iframe.style.height      = "140px";
    this.iframe.style.transition  = "all 0.3s ease";
    this.iframe.style.boxShadow   = "none";
    const self = this;
    setTimeout(function() {
        self.iframe.style.display     = "block";
        self.iframe.style.border      = "none";
        self.iframe.style.position    = "absolute";
        self.iframe.style.opacity     = "1";
        self.iframe.style.colorScheme = "none";
        self.iframe.style.background  = "none transparent !important";
        self.iframe.style.margin      = "0px";
        self.iframe.style.transform   = "translateY(0px)";
        self.iframe.style.visibility  = "visible";
        self.iframe.style.zIndex      = "2147483000";
    }, 500);
  };

  WidgetManager.prototype.applyOpenStyles = function(height) {
    this.iframe.style.display   = "block";
    this.iframe.style.border    = "none";
    this.iframe.style.position  = "absolute";
  
    if (window.innerWidth <= 768) { // Detect mobile devices
      this.toggleScroll(false);
      document.querySelector('body').style.overflow = 'hidden';
      document.querySelector('body').classList.add('no-scroll');

      this.iframe.style.width     = "100%";
      this.iframe.style.height    = "100%";
      this.iframe.style.top       = "0";
      this.iframe.style.left      = "0";
      this.iframe.style.overflow  = 'hidden';
    } else {
      this.iframe.style.width     = "350px";
      this.iframe.style.height    = "540px";
    }

    if(height?.view === "welcome") {

      if( window.innerWidth <= 768 ){
        this.iframe.style.height = '100%';
      }else {
        this.iframe.style.height = height.height;
      }
    }
    if (window.innerWidth > 768 && height?.view != "welcome" ) { 
      this.iframe.style.height = "540px";
    }

    this.iframe.style.opacity      = "1";
    this.iframe.style.colorScheme  = "none";
    this.iframe.style.background   = "none transparent !important";
    this.iframe.style.margin       = "0px";
    this.iframe.style.transform    = "translateY(0px)";
    this.iframe.style.transition   = "all 0.3s ease";
    this.iframe.style.visibility   = "visible";
    this.iframe.style.boxShadow    = "0px 4px 20px 0px rgba(0, 0, 0, 0.15)";
    this.iframe.style.borderRadius = window.innerWidth > 768 ? "15px" : "0"; // No border radius for mobile
    this.iframe.style.zIndex       = "2147483000";
  };

  WidgetManager.prototype.applyOpenStylesIn = function(height) {
    document.querySelector('.inn').style.display   = "block";
    document.querySelector('.inn').style.border    = "none";
    document.querySelector('.inn').style.position  = "fixed";
  
    if (window.innerWidth <= 768) { 
      this.toggleScroll(false);
      document.querySelector('body').style.overflow = 'hidden';
      document.querySelector('body').classList.add('no-scroll');

      document.querySelector('.inn').style.width     = "100%";
      document.querySelector('.inn').style.height    = "100%";
      document.querySelector('.inn').style.top       = "0";
      document.querySelector('.inn').style.left      = "0";
      document.querySelector('.inn').style.overflow  = 'hidden';
    } else {
      document.querySelector('.inn').style.width     = "350px";

      document.querySelector('.inn').style.height    =  "540px";
    }
    if(height?.view === "welcome") {

      if( window.innerWidth <= 768 ){
        document.querySelector('.inn').style.height = '100%';
      }else {
        document.querySelector('.inn').style.height = height.height;
      }
    }
    if (window.innerWidth > 768 && height?.view != "welcome" ) { 
      document.querySelector('.inn').style.height  = "540px";
    }

    document.querySelector('.inn').style.opacity      = "1";
    document.querySelector('.inn').style.colorScheme  = "none";
    document.querySelector('.inn').style.background   = "none transparent !important";
    document.querySelector('.inn').style.margin       = "0px";
    document.querySelector('.inn').style.transform    = "translateY(0px)";
    document.querySelector('.inn').style.transition   = "all 0.3s ease";
    document.querySelector('.inn').style.visibility   = "visible";
    document.querySelector('.inn').style.boxShadow    = "0px 4px 20px 0px rgba(0, 0, 0, 0.15)";
    document.querySelector('.inn').style.borderRadius = window.innerWidth > 768 ? "15px" : "0"; // No border radius for mobile
    document.querySelector('.inn').style.zIndex       = "2147483000";
    if( window.innerWidth <= 768 ){
      document.querySelector('.inn').style.inset = 'auto 0px 0px auto'
    }
  };
  WidgetManager.prototype.applyClosedStylesIn = function() {
    document.querySelector('.inn').style.width       = window.innerWidth > 768 ? "430px" : "300px";
    document.querySelector('.inn').style.height      = "140px";
    document.querySelector('.inn').style.transition  = "all 0.3s ease";
    document.querySelector('.inn').style.boxShadow   = "none";
    document.querySelector('.inn').style.inset       = "auto 10px 20px auto";
    const self = this;
    setTimeout(function() {
        document.querySelector('.inn').style.display     = "block";
        document.querySelector('.inn').style.border      = "none";
        document.querySelector('.inn').style.position    = "fixed";
        document.querySelector('.inn').style.opacity     = "1";
        document.querySelector('.inn').style.colorScheme = "none";
        document.querySelector('.inn').style.background  = "none transparent !important";
        document.querySelector('.inn').style.margin      = "0px";
        document.querySelector('.inn').style.transform   = "translateY(0px)";
        document.querySelector('.inn').style.visibility  = "visible";
        document.querySelector('.inn').style.zIndex      = "2147483000";
    }, 500);
  };
  WidgetManager.prototype.applyOpenLeftORigth = function(widget_position) {

    if(widget_position === "left") {
      document.querySelector('.inn').style.inset = "auto auto 10px 10px";
    } else {
      document.querySelector('.inn').style.inset = 'auto 10px 10px auto'
    }
  };
  WidgetManager.prototype.applyOpenLeftORigthAux = function(widget_position) {

    if(widget_position?.type === 'DynamicLefOrRigt' && window.innerWidth <= 768) {
      if(widget_position?.value === 'left') {
        document.querySelector('.inn').style.inset = "auto 0px 0px auto";
      }else {
        document.querySelector('.inn').style.inset = 'auto 0px 0px auto'
      }
    } else if (widget_position?.type === 'DynamicLefOrRigt' && window.innerWidth >= 768) {
      if(widget_position?.value === 'left') {
        document.querySelector('.inn').style.inset = "auto auto 10px 10px";
      }else {
        document.querySelector('.inn').style.inset = 'auto 0px 0px auto'
      }
  
    }
 
  };

  WidgetManager.prototype.applywidth = function(width) {
    this.iframe.style.width     = width;
    document.querySelector('.inn').style.width = width;
    
  };

  WidgetManager.prototype.closeWidget = function() {
    console.log('closewite')
    document.querySelector('body').style.overflow = 'auto';
    this.applyClosedStyles();
    this.applyClosedStylesIn()
    this.toggleScroll(true);
  };

  WidgetManager.prototype.setupWidget = function() {
    this.containerDiv.className = "inn";
    this.iframe.src = "about:blank"; // Set iframe src to about:blank
    this.iframe.loading = "lazy"
    this.iframe.srcdoc          = `
    <!DOCTYPE html>
    <html lang="en" style="overflow: hidden;">
      <head>
        <title>Live Chat</title>
        <link rel="stylesheet" crossorigin href="https://apps.clientify.net/livechat/livechat2/dist/assets/index.css">
      </head>
      <body style="overflow: hidden;">
      <div id="root" style="overflow: hidden;"></div>
        <script>
        const id = "${this.id}";
        const apiKey = "${this.apiKey}";

        localStorage.setItem('id', id);
        localStorage.setItem('apiKey', apiKey);
        </script>
        <script type="module" crossorigin src="https://apps.clientify.net/livechat/livechat2/dist/assets/index.js"></script>
      </body>
    </html>
        `;
    this.iframe.frameBorder = "0";
    this.containerDiv.appendChild(this.iframe);
    document.body.appendChild(this.containerDiv);
  };


  WidgetManager.prototype.attachEventListeners = function() {
    const self = this;
    window.addEventListener('message', function(event) {
        if (event.data.type === 'CLOSE_WIDGET') {
            self.closeWidget();
        }
        if (event.data.type === 'OPEN_WIDGET') {
          // console.log('first',event.data.height)
          console.log('OPEN_WIDGET')
          self.applyOpenStyles(event.data.height);
          self.applyOpenStylesIn(event.data.height);
        }
         if (event.data.type === 'WIDTH') {
          if( window.innerWidth <= 768  ) {
            self.applywidth('100%');
          }else {
            self.applywidth(event.data.width);
          }
        }
        if(event.data.type === 'WIDTH_NOTI') {
          if( window.innerWidth <= 768  ) {
            self.applywidth(event.data.width);
          }
        }
        if (event.data && event.data.type === 'LOG_MESSAGE') {
            // console.log('log:', event.data.message);
        }
        if (event.data && event.data.type === 'HIGH_SETTING') {
          if( window.innerWidth <= 768 ){
            self.iframe.style.height = '100%';
            document.querySelector('.inn').style.height = '100%'
            document.querySelector('.inn').style.inset = 'auto 0px 0px auto'
          }else {
            self.iframe.style.height = event.data.message;
            document.querySelector('.inn').style.height = event.data.message
            console.log('event.data.message',event.data.message)
          }
        }
        if (event.data && event.data.type === 'OPEN_URL') {
          // console.log('log:', event.data.message);
        }
        if (event.data && event.data.type === 'WIDGET_POSITION') {
          // console.log('log:', event.data.widget_position);
          self.applyOpenLeftORigth(event.data.widget_position)
        }
        if( event.data && event.data.type === 'WIDGET_POSITION_AUX') {
          self.applyOpenLeftORigthAux(event.data.widget_position)
        }
        if (event.data && event.data.type === 'NEW_MESSAGE') {
          let audio = new Audio('https://apps.clientify.net/livechat/notification-01.mp3')
          audio.play()
      }
    });
  };

  // Store the instance globally
  window.widgetManagerInstance = new WidgetManager();
  window.widgetManagerInstance.init();
})();