let url = window.location.href;
let parsedUrl = new URL(url);
let domain = parsedUrl.hostname;

if (window.location.href.includes("editor") || window.location.href.includes("oseid")) {
  fetch('https://productreview.myappgurus.com/api/checkAppEmbed', {
    method: "POST",
    headers: {
      'Accept': 'application/json',
      'Content-type': 'application/json',
      'Authorization': `Bearer ${window.sessionToken}`
    },
    body: JSON.stringify({
      shopName: domain
    }),
  })
  .then(res => res.json())
  .then(response => {
    if (response.disabled == undefined || response.disabled == true) {
      let html = `<div class="main-gurusalert-wrapper" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); z-index: 99;">
        <div class="gurus-mag-alert-wrapper" style="max-width: 600px; width: 100%; display: flex; flex-direction: column;align-items: center;justify-content: center; height: 100vh;margin: 0 auto;">
          <div class="gurus-mag-alert-box" style="max-width: 600px; width: 100%;display: flex;flex-direction: column;font-size: 18px;line-height: 24px;background-color: #fff;box-shadow: 0px 4px 12px rgba(0, 0, 0, .25); z-index: 99999;min-height: 163px;transition: height .1s ease-in-out;color: #091218;padding: 12px 16px;font-weight: 400;border-radius: 16px;max-height: 630px;overflow: auto;">
            <div class="gurus-mag-box">
              <div class="gurus-head-btn" style="display: -webkit-box; display: -ms-flexbox; display: flex;-ms-flex-wrap: wrap; flex-wrap: wrap;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify; justify-content: space-between;">
                <p class="gurus-mag-head-text" style="font-weight: 500;font-size: 28px;line-height: 36px; margin: 0 10px 0 0;">Action required - mag is not set up</p>
              </div>
              <p class="gurus-mag-sub-text" style="font-size: 16px; line-height: 24px;">To add mag to your store, follow the instructions below:</p>
            </div>
            <ol class="gurus-mag-instructions-list" style="margin: 0; padding: 0 16px;">
              <li class="gurus-mag-instruction">
                <div class="gurus-mag-text">Click the button below</div>
              </li>
              <li class="gurus-mag-instruction">
                <div class="gurus-mag-text">Make sure <stronng>"MyAppGurus Product Review"</stronng> is on</div>
              </li>
              <li class="gurus-mag-instruction">
                <div class="gurus-mag-text">Click on <stronng>"Save"</stronng></div>
              </li>
            </ol>
            <div class="gurus-mag-video-wrapper" style=" padding: 16px; border-radius: 24px;  background-color: #FFE4B7;display:-webkit-box; display: -ms-flexbox;display: flex;  justify-content:center; align-items: center; width: fit-content; align-self: center; margin: 16px 0;">
              <div class="gurus-mag-video-container" style="background-color: #ffdbd1; border-radius: 16px; overflow: hidden;display: flex;align-items: center; width: auto;max-height: 320px;">
                <video autoplay="" playsinline="" loop="" muted="" class="gurus-mag-integration-video" style="height: 100%; width: 100%;object-fit: cover;">
                  <source src="https://productreview.myappgurus.com/assets/appembed.mp4" type="video/mp4">
                </video>
              </div>
            </div>
            <div class="gurus-mag-button-wrapper" style="display: flex;
            flex-wrap: wrap; justify-content: flex-end;">
              <div class="gurus-mag-btn gurus-mag-btn-secondary" style="border-radius: 16px;
              cursor: pointer;font-size: 16px;line-height: 24px; font-weight: normal;font-weight: 600; border: 0px; padding: 10px 12px; transition: background-color .1s ease-in-out, color .1s ease-in-out, border .1s ease-in-out;color: #00120a; margin: 0 10px 0 0;">Dismiss</div>
                <div class="gurus-mag-btn gurus-mag-btn-primary" style="border-radius: 16px;
                cursor: pointer;font-size: 16px; line-height: 24px; font-weight: normal; font-weight: 600;border: 0px; padding: 10px 12px; transition: background-color .1s ease-in-out, color .1s ease-in-out, border .1s ease-in-out;background-color: #00120a; color: #fff;">
                  Enable app now
                </div>
            </div>
          </div>
        </div>
      </div>`;
      const wrapper = document.createElement('div');
      wrapper.innerHTML = html;
      document.body.appendChild(wrapper.firstChild);
      closePopup();
      enableappembed();
    }
    console.log(response.disabled);
  })

  var closePopup = () => {
    let closebtn = document.querySelector('.gurus-mag-btn.gurus-mag-btn-secondary');
    if (closebtn) {
      closebtn.addEventListener('click', () => {
        document.querySelector('.main-gurusalert-wrapper').style.display = 'none';
      });
    }
  }

  var enableappembed = () => {
    console.log(domain);
    let appembed = document.querySelector('.gurus-mag-btn.gurus-mag-btn-primary');
    if (appembed) {
      appembed.addEventListener('click', () => {
        window.open(`https://${domain}/admin/themes/current/editor?context=apps&activateAppId=c69d5134-3c50-47ae-8dee-1c30837be37a/app-embed`);
      });
    }
  }
}