window.onload = (function () {
  var btnWrapper = document.createElement('div');
  var btn = document.createElement('button');
  var iconWrapper = document.createElement('div');
  var icon = document.createElement('i');
  var textWrapper = document.createElement('div');
  var text1 = document.createElement('div');
  var text2 = document.createElement('div');
  var overlay = document.createElement('div');
  var iframe = document.createElement('iframe');
  var isOpen = false;

  overlay.style = `
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9997;
        opacity: 0;
        background-color: #1E1E1E;
        transition: opacity ease 0.3s;
      `;
  iframe.id = 'booking-widget';
  iframe.src = 'https://bodywell.app/widgets/booking/service?company_id=864&branch_id=802&lang=fr';
  iframe.classList.add('widget-booking');
  iframe.style = `
         right: -375px;
         position: fixed;
         top: 0;
         bottom: 0;
         width: 375px;
         height: 100%;
         z-index: 9999;
         border: 0;
         background-color: #fff;
         transition: right ease 0.3s;
       `;

  text1.innerText = 'RESERVATION';
  text2.innerText = 'EN LIGNE';

  textWrapper.style = `text-align:left;`;

  text1.style = `
        font-size: 14px;
        font-wieght: 600;        
      `;
  text2.style = `
        font-size: 14px;
        font-weight: 600;
        color:#186fda;
      `;
  textWrapper.append(text1);
  textWrapper.append(text2);

  btnWrapper.style = `
        position:fixed;
        bottom:32px;
        right:32px;
        z-index: 9998;
        display: flex;
        min-width:220px;
        padding:12px;
        background-color:rgba(24,111,218,0.15);
        border-radius:100px;
        transition: right ease 0.3s;
      `;
  btn.style = `
        width:100%;
        padding: 8px;
        display: flex;
        align-items: center;
        background-color:#fff;
        border: 1px solid #f5f5f5;
        border-radius:100px;
        box-shadow: 10px 0 10 rgba(0, 0,0,0.15);
      `;
  iconWrapper.style = `
        margin-right: 12px;
        display:flex;
        justify-content:center;
        align-items: center;
        width:56px;
        height:56px;
        border-radius:9999px;
        background: linear-gradient(180deg, #5CA2FA 0%, #186FDA 100%);
        box-shadow: 0px 10px 10px rgba(136, 176, 236, 0.25);
      `;
  icon.style = `
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.23166 6.37502H4.75193C4.30275 6.37502 3.93863 6.01139 3.93863 5.56225V0.81306C3.93863 0.363873 4.30275 0 4.75193 0H6.23166C6.6808 0 7.04497 0.363873 7.04497 0.81306V5.56225C7.04497 6.01139 6.6808 6.37502 6.23166 6.37502Z' fill='white'/%3E%3Cpath d='M17.7481 6.37502H19.2278C19.6767 6.37502 20.0408 6.01139 20.0408 5.56225V0.81306C20.0409 0.363873 19.6767 0 19.2278 0H17.7481C17.299 0 16.9348 0.363873 16.9348 0.81306V5.56225C16.9348 6.01139 17.299 6.37502 17.7481 6.37502Z' fill='white'/%3E%3Cpath d='M8.76136 13.2122C8.76136 12.9122 8.51803 12.6692 8.21778 12.6692H6.3209C6.021 12.6692 5.77762 12.9122 5.77762 13.2122V15.1089C5.77762 15.4093 6.021 15.6524 6.3209 15.6524H8.21778C8.51803 15.6524 8.76136 15.4093 8.76136 15.1089V13.2122Z' fill='white'/%3E%3Cpath d='M13.5019 13.2122C13.5019 12.9122 13.2585 12.6692 12.9589 12.6692H11.0618C10.7619 12.6692 10.5185 12.9122 10.5185 13.2122V15.1089C10.5185 15.4093 10.7619 15.6524 11.0618 15.6524H12.9589C13.2585 15.6524 13.5019 15.4093 13.5019 15.1089V13.2122Z' fill='white'/%3E%3Cpath d='M17.6994 12.6692C17.9993 12.6692 18.2427 12.9122 18.2427 13.2122V15.1089C18.2427 15.4093 17.9993 15.6524 17.6994 15.6524H15.8026C15.5023 15.6524 15.259 15.4093 15.259 15.1089V13.2122C15.259 12.9122 15.5023 12.6692 15.8026 12.6692H17.6994Z' fill='white'/%3E%3Cpath d='M8.76136 17.9533C8.76136 17.6528 8.51803 17.4099 8.21778 17.4099H6.3209C6.021 17.4099 5.77762 17.6528 5.77762 17.9533V19.8496C5.77762 20.1498 6.021 20.3929 6.3209 20.3929H8.21778C8.51803 20.3929 8.76136 20.1497 8.76136 19.8496V17.9533Z' fill='white'/%3E%3Cpath d='M12.9589 17.4099C13.2585 17.4099 13.5019 17.6528 13.5019 17.9533V19.8496C13.5019 20.1497 13.2585 20.3929 12.9589 20.3929H11.0618C10.7619 20.3929 10.5185 20.1498 10.5185 19.8496V17.9533C10.5185 17.6528 10.7619 17.4099 11.0618 17.4099H12.9589Z' fill='white'/%3E%3Cpath d='M18.2427 17.9533C18.2427 17.6528 17.9993 17.4099 17.6997 17.4099H15.8026C15.5023 17.4099 15.259 17.6528 15.259 17.9533V19.8496C15.259 20.1498 15.5023 20.3929 15.8026 20.3929H17.6997C17.9993 20.3929 18.2427 20.1497 18.2427 19.8496V17.9533Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.849 2.43555C22.3543 2.16451 21.8638 2.63342 21.8638 3.1975V5.13592C21.8638 6.47789 20.7751 7.5593 19.4333 7.5593H17.9002C16.5583 7.5593 15.4552 6.47789 15.4552 5.13592V3.15625C15.4552 2.60397 15.0075 2.15625 14.4552 2.15625H9.54478C8.99249 2.15625 8.54478 2.60397 8.54478 3.15625V5.13592C8.54478 6.47789 7.44174 7.5593 6.10008 7.5593H4.5666C3.22489 7.5593 2.13628 6.47789 2.13628 5.13592V3.1975C2.13628 2.63341 1.64577 2.16451 1.15106 2.43555C0.469124 2.80916 0 3.5331 0 4.36529V21.7651C0 22.9802 0.984879 23.9782 2.19999 23.9782H21.8C23.0133 23.9782 24 22.9782 24 21.7651V4.36529C24 3.53311 23.5309 2.80917 22.849 2.43555ZM21.1517 20.6816C21.1517 21.2067 20.7259 21.6327 20.2006 21.6327H3.75755C3.23223 21.6327 2.80646 21.2067 2.80646 20.6816V11.694C2.80646 11.1686 3.23218 10.7426 3.75755 10.7426H20.2005C20.7258 10.7426 21.1516 11.1686 21.1516 11.694L21.1517 20.6816Z' fill='white'/%3E%3C/svg%3E%0A");
      `;
  iconWrapper.append(icon);
  btn.append(iconWrapper);
  btn.append(textWrapper);

  btnWrapper.append(btn);

  document.getElementsByTagName('body')[0].append(btnWrapper);

  btnWrapper.addEventListener('click', (e) => {
    document.getElementsByTagName('body')[0].append(overlay);
    document.getElementsByTagName('body')[0].append(iframe);
    setTimeout(() => {
      btnWrapper.style.right = '-252px';
    }, 100);
    setTimeout(() => {
      iframe.classList.add('open');
      iframe.style.right = 0;
      isOpen = true;
    }, 300);

    setTimeout(() => {
      overlay.style.opacity = '0.8';
    }, 400);
  });

  const closeWidget = function () {
    overlay.style.opacity = '0';
    iframe.style.right = '-375px';
    btnWrapper.style.right = '32px';
    setTimeout(() => {
      iframe.remove();
      overlay.remove();
    }, 300);

    isOpen = false;
  };

  document.addEventListener('click', (e) => {
    if (isOpen) {
      e.preventDefault();
      e.stopPropagation();

      closeWidget();
    }
  });

  window.addEventListener('message', (event) => {
    if (event.data.type && event.data.type == 'bodywellBookingWidgetClose') {
      closeWidget();
    }
  });
})();