var refreshIntervalId = setInterval(() => {
  if (window.Shopify.shop.length > 0) {
    render();
    // kill setinterval
    clearInterval(refreshIntervalId);
  }
}, 300);

function render() {
  var host = window.Shopify.shop;
  var product = window.ShopifyAnalytics.meta.product;
  var preorder;
  var selectedVariant;
  var listOfOnVariants = [];
  var url =
    "https://stingray-app-n99th.ondigitalocean.app/getpreorder?shop=" +
    host +
    "&productid=" +
    product.id;

  fetch(url)
    .then((response) => response.json())
    .then((result) => {
      preorder = result.preorder;
      console.log("preorder");
      console.log(preorder);

      /* push on varines to listOfOnVariants */
      preorder.selectedProducts.map((selectedProduct) => {
        selectedProduct.variants.map((variant) => {
          if (variant.toggel == true) {
            listOfOnVariants.push(variant.id);
          }
        });
      });
      console.log("listOfOnVariants");
      console.log(listOfOnVariants);
      /* set selected varient id */
      selectedVariant = document.getElementsByName("id")[0].value;
      /* set varient listner */
      document
        .getElementsByName("id")[0]
        .addEventListener("change", updateSelectedVariant);
      /* render pre order */
      renderPreOrder();
    });

  /* function  update selectedvarient */
  function updateSelectedVariant() {
    selectedVariant = this.value;
    console.log("selectedVariant");
    console.log(selectedVariant);
    /* render pre order */
    /* delay 1 second */
    setTimeout(function () {
      renderPreOrder();
    }, 1000);
  }
  /* function  update selectedvarient */

  /**  function render preOrder **/
  function renderPreOrder() {
    console.log(
      "include :" + listOfOnVariants.includes(Number(selectedVariant))
    );
    if (
      listOfOnVariants.includes(Number(selectedVariant)) &&
      preorder.show == true
    ) {
      var addToCart;
      for (
        var i = 0;
        i < document.querySelectorAll('[action*="/cart/add"]').length;
        i++
      ) {
        if (
          document
            .querySelectorAll('[action*="/cart/add"]')
            [i].querySelectorAll('[type="submit"]')[0] != undefined
        ) {
          console.log(
            document
              .querySelectorAll('[action*="/cart/add"]')
              [i].querySelectorAll('[type="submit"]')[0]
          );
          addToCart = document
            .querySelectorAll('[action*="/cart/add"]')
            [i].querySelectorAll('[type="submit"]')[0];
        }
      }
      // tospitikomas-com.myshopify.com
      if (host == "tospitikomas-com.myshopify.com") {
        addToCart = document.getElementsByClassName(
          "c-btn c-btn--full c-btn--primary product-form__add-btn js-product-add"
        )[0];
      }
      // support-1143.myshopify.com
      if (host == "support-1143.myshopify.com") {
        addToCart = document.getElementsByClassName(
          "btn btn-lg btn-addtocart addtocart-js"
        )[0];
        document
          .getElementsByClassName("tt-row-custom-01")[0]
          .classList.add("tt-row-custom-1234");
      }

      // melissa-shoes-panama.myshopify.com
      if (host == "melissa-shoes-panama.myshopify.com") {
        addToCart = document.getElementsByClassName(
          "button ajax-submit action_button button--add-to-cart"
        )[0];
      }
      if (host == "sass-at-home.myshopify.com") {
        addToCart.value = preorder.buttonText;
        addToCart.style.padding = "0px ";
      }

      console.log("preorder");
      console.log(preorder);
      // new methode
      var addToCartText = addToCart.innerText.toLocaleLowerCase();
      var newElement = addToCart.innerHTML
        .toLocaleLowerCase()
        .replaceAll(addToCartText, preorder.buttonText);
      addToCart.innerHTML = newElement;

      addToCart.classList.add(
        "without-after-element",
        "without-before-element"
      );
      addToCart.style =
        "background-color: " +
        preorder.colorBackground +
        "; border: " +
        preorder.borderWidth +
        "px solid " +
        preorder.colorBorder +
        "; padding-top: " +
        preorder.paddingTop +
        "px; padding-bottom: " +
        preorder.paddingBottom +
        "px; color: " +
        preorder.colorFont +
        "; border-radius: " +
        preorder.borderRadius +
        "px;";

      if (host == "sass-at-home.myshopify.com") {
        addToCart.value = preorder.buttonText;
        addToCart.style.padding = "0px ";
      }

      if (preorder.preOrderPlacment == "Above") {
        addToCart.parentElement.innerHTML =
          "<span  id='--pix-preorder' style='text-align: center;display: block;'>" +
          preorder.preOrderMessage +
          "</span>" +
          addToCart.outerHTML;
      }
      if (preorder.preOrderPlacment == "Below") {
        addToCart.parentElement.innerHTML =
          addToCart.outerHTML +
          "<span id='--pix-preorder' style='text-align: center;display: block;'>" +
          preorder.preOrderMessage +
          "</span>";
      }
    } else {
      if (document.getElementById("--pix-preorder") != null) {
        document.getElementById("--pix-preorder").innerHTML = "";
      }
    }
  }
  /**  function render preOrder **/
}