// Create the modal container
const modalContainer = document.createElement('div');
modalContainer.id = 'modal-container';

// Create the modal content
const modalContent = document.createElement('div');
modalContent.id = 'modal-content';

// Create the close button
const closeButton = document.createElement('span');
closeButton.id = 'close-button';
closeButton.innerHTML = '×';

// Create the chatbot iframe
const chatbotIframe = document.createElement('iframe');
chatbotIframe.id = 'connectPlexChatBotiFrame';
chatbotIframe.src = 'https://connectplex.ai/embedChatView/201-c803e';
//chatbotIframe.src = 'http://192.168.0.90:3000/embedChatView/201-c803e';
chatbotIframe.frameborder = '0';
chatbotIframe.allow = 'microphone; camera';

// Append elements to the modal container
modalContent.appendChild(closeButton);
modalContent.appendChild(chatbotIframe);
modalContainer.appendChild(modalContent);
modalContainer.style.zIndex = "999999";

// Append modal container to the document body
document.body.appendChild(modalContainer);

// Create the icon button
const iconButton = document.createElement('div');
iconButton.id = 'icon-button';
iconButton.style.zIndex = '99999';

// Create the icon image
const iconImage = document.createElement('img');
iconImage.src = 'https://connectplex.ai/assets/pcustom/embedChat/connectplexChat2.svg';
iconImage.alt = 'Chat Icon';

// Append icon image to the icon button
iconButton.appendChild(iconImage);

// Append icon button to the document body
document.body.appendChild(iconButton);

// Function to open the modal
var firstTimeOpen = 1;
function openModal() {
  modalContainer.style.display = 'block';
  var iFrameWindow = chatbotIframe.contentWindow;
  if (firstTimeOpen == 0) {
    iFrameWindow.postMessage('chatPopupOpen', '*');
  } else {
    firstTimeOpen = 0;
  }
}

// Function to close the modal
function closeModal() {
modalContainer.style.display = 'none';
var iFrameWindow = chatbotIframe.contentWindow;
iFrameWindow.postMessage('chatPopupClose', '*');
}

// Event listener for the close button
closeButton.addEventListener('click', closeModal);

// Event listener for showing the modal
iconButton.addEventListener('click', openModal);

// Inject CSS styles
const cssStyles = `
#modal-container {
position: fixed;
bottom: 20px;
right: 20px;
width: 420px; /* Adjust the width as needed */
height: 556px; /* Adjust the height as needed */
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 4px;
z-index: 9999;
display: none;
}

#modal-content {
position: relative;
width: 100%;
height: 100%;
}

#close-button {
position: absolute;
top: 10px;
right: 20px;
font-size: 30px;
color: #444;
cursor: pointer;
}

#icon-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #eaeaea;
border-radius: 50%;
cursor: pointer;
/* Add your icon styles here */
}

#icon-button:hover {
background-color: #ccc;
}

#icon-button img {
width: 100%;
height: 100%;
object-fit: contain;
}

#connectPlexChatBotiFrame {
height: 100%;
width:100%;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
`;

const styleElement = document.createElement('style');
styleElement.innerHTML = cssStyles;
document.head.appendChild(styleElement);

var isMobile = window.innerWidth < 768;
if (isMobile) {
  modalContainer.style.bottom = 20;
  modalContainer.style.right = 0;
}