//surflogic-australia.myshopify.com
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];
        }
      }

      console.log("preorder");
      console.log(preorder);
      // new methode
      addToCart.value = preorder.buttonText;

      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 (preorder.preOrderPlacment == "Above") {
        var span = document.createElement("span");
        span.innerHTML = preorder.preOrderMessage;
        span.id = "--pix-preorder";
        span.style = "text-align: center;display: block;";
        addToCart.parentNode.insertBefore(span, addToCart);
      }
      if (preorder.preOrderPlacment == "Below") {
        function insertAfter(referenceNode, newNode) {
          referenceNode.parentNode.insertBefore(
            newNode,
            referenceNode.nextSibling
          );
        }
        var span = document.createElement("span");
        span.innerHTML = preorder.preOrderMessage;
        span.id = "--pix-preorder";
        span.style =
          "text-align: center; display: block; float: left; letter-spacing: .19em; width: 62%; max-width: 320px;";

        insertAfter(addToCart, span);
      }
    } else {
      if (document.getElementById("--pix-preorder") != null) {
        document.getElementById("--pix-preorder").innerHTML = "";
      }
    }
  }
  /**  function render preOrder **/
}