window.onload = () => {
  console.log("kioaded");

  checkProjectId();
  checkRefresh();
};

function checkRefresh() {
  if (window.POPZY_REFRESH) {
    console.log("refreshed");

    showNotifications();
    window.POPZY_REFRESH = false;
    checkRefresh();
  } else {
    // console.log("no refresh, checking in a second");

    setTimeout(function () {
      checkRefresh();
    }, 500);
  }
}

function checkProjectId() {
  if (window.POPZY_PROJECT_ID) {
    console.log("project_id", window.POPZY_PROJECT_ID);
    showNotifications();
  } else {
    // console.log("no project_id, checking in a second");

    setTimeout(function () {
      checkProjectId();
    }, 500);
  }
}

function showNotifications() {
  var elemDiv = document.createElement("div");
  let body = document.getElementsByTagName("body")[0];
  elemDiv.style.cssText =
    "display:flex;top:10px;position:absolute;right:10px;flex-direction:column;";
  body.appendChild(elemDiv);

  notiData = fetch(
    `https://qvpaphaparxsfjnaoazh.supabase.co/rest/v1/notifications?project_id=eq.${window.POPZY_PROJECT_ID}`,
    {
      headers: {
        apikey:
          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InF2cGFwaGFwYXJ4c2ZqbmFvYXpoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTY1NzUyOTcsImV4cCI6MjAzMjE1MTI5N30.LolIEsL96zbcfMtzLZGx4vHJxhzVyQyYf7Rc06kTGCE",
      },
    }
  )
    .then((res) => res.json())
    .then((jsonResp) => {
      jsonResp.forEach((noti, index) => {
        const iconPrefix =
          "https://qvpaphaparxsfjnaoazh.supabase.co/storage/v1/object/public/icons/";
        var notiDiv = document.createElement("div");
        notiDiv.style.cssText =
          "padding:10px;width:300px;height:70px;margin-top:10px;z-index:100;background:#4e4e4e;opacity:0.92;border-radius:10px;display:flex;gap: 20px;";

        notiDiv.id = `elem${Math.random()}`;

        const iconUrl = iconPrefix + window.POPZY_PROJECT_ID + "/" + noti.id;

        var imgElem = document.createElement("img");
        imgElem.src = iconUrl;
        imgElem.style = "width:40px; height:40px; border-radius:10px";

        notiDiv.appendChild(imgElem);


        var textContainerDiv = document.createElement("div");


        var headerDiv = document.createElement("div");
        headerDiv.textContent = noti?.header;
        headerDiv.style.cssText = "font-size:14px;font-weight: 500;";
        textContainerDiv.appendChild(headerDiv);

        var subheadDiv = document.createElement("div");
        subheadDiv.textContent = noti?.subheader;
        subheadDiv.style.cssText = "font-size:10px;";
        textContainerDiv.appendChild(subheadDiv);

        notiDiv.appendChild(textContainerDiv)

        setTimeout(function () {
          elemDiv.appendChild(notiDiv);
          // notiDiv.style.cssText = notiDiv.style.cssText + "transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);	transition-duration: 1000ms; transition-delay: 2000ms;transform: translateX(1rem);"
        }, 500 * index);

        setTimeout(function () {
          // elemDiv.appendChild(notiDiv);
          notiDiv.style.cssText =
            notiDiv.style.cssText +
            "transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);	transition-duration: 1200ms;transform: translateX(-2rem);";
        }, 10 + 500 * index);

        setTimeout(function () {
          // elemDiv.appendChild(notiDiv);
          notiDiv.style.cssText = notiDiv.style.cssText + "opacity:0;";
        }, 3000 + 500 * index);

        setTimeout(function () {
          document.getElementById(notiDiv.id).style.display = "none";
        }, 3500 + 500 * index);
      });
    });
}