window.addEventListener('load', (function () {
  var directIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g opacity="0.4">
  <path d="M3.80326 7.27347C3.82059 7.15483 3.87332 7.03879 3.96732 6.93754L7.39115 3.24418C7.71615 2.91918 8.24388 2.91918 8.56888 3.24418L11.9927 6.93558C12.3697 7.34158 12.0818 8.00004 11.5298 8.00004L9.00052 8.00004L9.00052 10C9.00052 14.9826 13.0179 19 18.0005 19H20.0005C20.133 18.9982 20.2646 19.0226 20.3876 19.0721C20.5105 19.1215 20.6225 19.1948 20.7168 19.2879C20.8112 19.3809 20.8861 19.4918 20.9373 19.614C20.9884 19.7363 21.0148 19.8675 21.0148 20C21.0148 20.1326 20.9884 20.2638 20.9373 20.386C20.8861 20.5083 20.8112 20.6192 20.7168 20.7122C20.6225 20.8052 20.5105 20.8786 20.3876 20.928C20.2646 20.9774 20.133 21.0019 20.0005 21H18.0005C11.9371 21 7.00052 16.0634 7.00052 10L7.00052 8.00004H4.43021C4.01546 8.00004 3.75127 7.6294 3.80326 7.27347Z" fill="black"/>
  </g>
  </svg>`;
  var faceIcon = `<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="29" height="29" rx="10" fill="#F1CD4D"/>
  <path d="M13.7997 16.912C12.9299 16.8478 12.9233 15.3782 13.7997 15.443C14.3637 15.4846 14.9642 15.5974 15.5287 15.5704C15.7607 15.5593 15.8538 15.6492 15.9654 15.5019C16.0907 15.3357 15.7754 14.2729 15.7322 14.0695C15.433 12.6626 14.928 11.3489 14.2634 10.0982C13.8268 9.27661 15.003 8.53592 15.4393 9.35691C16.4121 11.1874 17.3353 13.4857 17.3333 15.6377C17.3313 17.6784 15.0223 17.0019 13.7997 16.912Z" fill="black"/>
  <path d="M9.21511 18.5769C12.178 21.1261 16.5176 20.9701 19.3116 18.2753C19.9614 17.6481 20.9772 18.6141 20.3274 19.2413C16.97 22.4803 11.7338 22.5844 8.19928 19.5429C7.51216 18.9518 8.53072 17.988 9.21511 18.5769Z" fill="black"/>
  <path d="M7.21801 9.7894C7.98383 10.0792 8.06796 11.0997 7.89639 11.9089C7.85318 12.1132 7.76015 12.2492 7.64603 12.3319C7.55961 12.4503 7.44905 12.547 7.30951 12.6093C6.52081 12.9614 6.07322 11.8736 6.00586 11.0879C5.93495 10.2605 6.52386 9.52659 7.21801 9.7894Z" fill="black"/>
  <path d="M21.4776 9.7894C22.3449 9.52659 23.0814 10.2605 22.9927 11.0879C22.9086 11.8736 22.3491 12.9614 21.3632 12.6093C21.1884 12.547 21.0506 12.4503 20.9425 12.3319C20.7999 12.2492 20.6836 12.1132 20.6296 11.9089C20.4151 11.0997 20.5203 10.0792 21.4776 9.7894Z" fill="black"/>
  </svg>`;
  var xIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1.6625 0.524994L0.525003 1.66249L6.8625 7.99999L0.487503 14.3875L1.6125 15.5125L8 9.13749L14.375 15.5125L15.5125 14.375L9.1375 7.99999L15.475 1.66249L14.3375 0.524994L8 6.86249L1.6625 0.524994Z" fill="black"/>
  </svg>`

  
  // Function to add CSS to the head
  function addStyles(css) {
    var style = document.createElement("style");
    style.type = "text/css";
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);
  }

  // Function to toggle the display of the iframe
  function toggleIframe() {
    document.getElementById("wingmateWidgetIframeContainer").onload = () => {};

    var iframeContainer = document.getElementById(
      "wingmateWidgetIframeContainer"
    );
    var isDisplayed = iframeContainer.style.display === "flex";

    iframeContainer.style.display = isDisplayed ? "none" : "flex";

    // remove buttonsContainer
    var buttonsContainer = document.getElementById(
      "wingmateWidgetButtonsContainer"
    );
    if (buttonsContainer) {
      buttonsContainer.style.display = "none";
    }

    const floatingIcon = document.getElementById(
      "wingmateWidgetFloatingIcon"
    );

    const xIconButton = document.getElementById("wingmateXIcon");
    xIconButton.style.display = isDisplayed ? "none" : "inline-flex";
  
    floatingIcon.innerHTML = isDisplayed
      ? `${directIcon}${faceIcon}`
      : `${faceIcon}<span>Close</span>`;
  }

  // CSS styles
  var css = `
    @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

    #wingmateWidgetFloatingIcon *:not(svg *),
    #wingmateWidgetButtonsContainer *:not(svg *),
    #wingmateWidgetFloatingIcon,
    #wingmateWidgetButtonsContainer {
      all: unset; 
      font-size: 16px;    
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    #wingmateWidgetFloatingIcon {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #FFFFFF;
      color: #000000;
      gap: 8px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 11px 25px;
      box-shadow: 0px 10px 50px 0px #0000001A;
      border-radius: 17px;
      cursor: pointer;
      z-index: 2000000;
      border-width: 0px;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
    
      transition: background-color 0.2s, color 0.2s;
    }
    #wingmateWidgetFloatingIcon:hover {
      background-color: #4F90D2;
      color: white;
    }
    #wingmateWidgetButtonsContainer {
      position: fixed;
      z-index: 2000000;
      bottom: 94px;
      right: 23px;
      font-family: 'Nunito', sans-serif;
    }
    #wingmateWidgetButtonsContainer button {
      display: flex;
      background-color: #FFFFFF;
      color: #000000;
      justify-content: center;
      align-items: center;
      padding: 11px 25px;
      width: 100%;
      box-shadow: 0px 10px 50px 0px #0000001A;
      border-radius: 17px;
      cursor: pointer;
      border-width: 0px;
      font-family: 'Nunito', sans-serif;
      font-weight: 600;

      transition: background-color 0.2s, color 0.2s;
    }
    #wingmateWidgetButtonsContainer button:hover {
        background-color: #4F90D2;
        color: white;
    }
    #wingmateWidgetButtonsContainer button:not(:last-child) {
      margin-bottom: 10px;
    }

    @media (min-width: 768px) {
      #wingmateWidgetIframeContainer {
        position: fixed;
        bottom: 94px;
        right: 0px;
        background-color: rgba(0,0,0,0.2);
        display: none;
        z-index: 2000000;
        max-width: 98%;
        width: 402px;
        max-height: 80%;
        height: 744px;
        border-radius: 10px;
        margin-right: 1vw;
      }

      #wingmateWidgetIframeContainer {
        display: none;
      }
    }

    @media (max-width: 768px) {
      #wingmateWidgetFloatingIcon *:not(svg *),
      #wingmateWidgetButtonsContainer *:not(svg *),
      #wingmateWidgetFloatingIcon,
      #wingmateWidgetButtonsContainer {
        font-size: 10px;
      }

      #wingmateWidgetFloatingIcon svg {
        height: 20px;
      }

      #wingmateWidgetFloatingIcon {
        padding: 5px 10px;
        border-radius: 8px;
      }

      #wingmateWidgetButtonsContainer {
        bottom: 70px;
      }

      #wingmateWidgetButtonsContainer button {
        padding: 5px 10px;
        border-radius: 8px;
      }

      #wingmateWidgetIframeContainer {
        position: fixed;
        bottom: 0px;
        right: 0px;
        background-color: rgba(0,0,0,0.2);
        display: none;
        z-index: 2000000;
        max-width: 100%;
        width: 100%;
        max-height: 100%;
        height: 100%;
      }

      #wingmateXIcon *:not(svg *),
      #wingmateXIcon {
        all: unset; 
        font-size: 16px;    
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      #wingmateXIcon {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: transparent;
        color: #000000;
        gap: 8px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 17px;
        cursor: pointer;
        z-index: 2000001;
        border-width: 0px;
        font-family: 'Nunito', sans-serif;
        font-weight: 800;
      }

      #wingmateXIcon:hover {
        border: 1px #000 solid;
        padding: 0.2rem;
        background-color: transparent;
        color: white;
        top: 16px;
        right: 16px;
        border-radius: 8px;
      }
    }
  `;

  // Inject CSS
  addStyles(css);

  //create head
  var maximumScale = document.createElement("meta");
  maximumScale.setAttribute("name", "viewport");
  maximumScale.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1");
  document.head.appendChild(maximumScale);

  // Create close icon
  var closeIcon = document.createElement("button");
  closeIcon.id = "wingmateXIcon";
  closeIcon.type = "button";

  closeIcon.innerHTML = xIcon;
  closeIcon.onclick = toggleIframe;
  closeIcon.style.display = "none";
  document.body.appendChild(closeIcon);


  // Create and append the floating icon
  var floatingIcon = document.createElement("button");
  floatingIcon.id = "wingmateWidgetFloatingIcon";
  floatingIcon.type = "button";

  floatingIcon.innerHTML = `${directIcon}${faceIcon}<span>Your WingMate</span>`;
  floatingIcon.onclick = toggleIframe;
  document.body.appendChild(floatingIcon);

  // Create and append the iframe container
  var iframeContainer = document.createElement("div");
  iframeContainer.id = "";
  iframeContainer.innerHTML = `<iframe src="https://www.wingmates.ai/embed?appId=65652fab4b5dcd384e831c3d&origin=${window.location.origin}" frameborder="0" id="wingmateWidgetIframeContainer"></iframe>`;
  document.body.appendChild(iframeContainer);

  document.getElementById("wingmateWidgetIframeContainer").onload = function () {
    // insert the buttons
    var buttonContents = ["Check flight status","Book a new flight"];
    var buttonsContainer = document.createElement("div");
    buttonsContainer.id = "wingmateWidgetButtonsContainer";
  
    buttonContents.forEach((content) => {
      var button = document.createElement("button");
      button.innerHTML = content;
      button.onclick = () => {
        var iframeContainer = document.getElementById(
          "wingmateWidgetIframeContainer"
        );
        iframeContainer.contentWindow.postMessage(
          content,
          "https://www.wingmates.ai"
        );
    
        toggleIframe();
      };
      buttonsContainer.appendChild(button);
    });
  
    var moreButton = document.createElement("button");
    moreButton.innerHTML = "More";
    moreButton.onclick = toggleIframe;
    buttonsContainer.appendChild(moreButton);
    
    document.body.appendChild(buttonsContainer);
  }
}));