let windowViewPort,
  drawSVG,
  init_particles,
  setInitialSVGState,
  init_cursor_links,
  mouse_info;
let bubbleColors = [
  ["#FFA487", "#BCC7FF", "#00B2AB"],
  // ["#FFA487", "#BCC7FF", "#00B2AB"],
  "#faf8f5",
];

// let params = new URLSearchParams(window.location.search);
if (window.innerWidth > 991) {
  windowViewPort = "desktop";
} else if (window.innerWidth <= 991 && window.innerWidth > 767) {
  windowViewPort = "tablet";
} else {
  windowViewPort = "mobile";
}

// Listen for the pageshow event on the window object
window.addEventListener("pageshow", function (event) {
  // Check if the page was loaded from the cache
  if (event.persisted) {
    location.reload();
  }
});
gsap.registerPlugin(
  ScrollTrigger,
  // ScrollSmoother,
  Flip,
  DrawSVGPlugin,
  SplitText,
  MorphSVGPlugin
);
//Set default duration for gsap

let testimonial_card_largest_height = 0;
$(".swiper-wrapper .swiper-slide").each(function () {
  const current_card = $(this);
  const card_height = current_card.outerHeight();
  // console.log(card_height);
  // current_card.append(card_height);
  if (card_height > testimonial_card_largest_height) {
    testimonial_card_largest_height = card_height;
  }
});

// console.log("testimonial_card_largest_height", testimonial_card_largest_height);
gsap.set(".swiper-wrapper .swiper-slide", {
  height: testimonial_card_largest_height + 10,
});

function loadContent(url, targetSelector, contentSelector, callback) {
  // Check if targetSelector is a jQuery object, otherwise convert it to one
  var target =
    targetSelector instanceof jQuery ? targetSelector : $(targetSelector);

  $.get(url, function (data) {
    var content = $(contentSelector, data); // Select the content from the fetched data
    // console.log(content);
    if (content.length) {
      // Check if the contentSelector exists
      target.append(content);
      if (typeof callback === "function") {
        callback(); // Call the callback function after content is loaded
      }
    } else {
      console.warn("ContentSelector not found:", contentSelector);
    }
  });
}

function loadTagsForBlogCard(url) {
  $(`.blog-card[slug]`).each(function () {
    const current_card = $(this);
    const tags_loaded = current_card.attr("tags_loaded");
    if (tags_loaded === "true") {
      return;
    }
    current_card.attr("tags_loaded", "true");
    const card_slug = current_card.attr("slug");

    const target_tag_container = current_card.find(
      ".blog_post_tag_wrapper_shell"
    );

    const card_url_path = "/resources/blog-posts/" + card_slug;
    // console.log(card_url_path);
    loadContent(
      `${card_url_path}`,
      target_tag_container,
      ".blog_category_tag_wrapper",
      function () {
        // console.log("Content loaded for the top slider");
      }
    );
  });

  // post_tag_wrapper
}

window.addEventListener("load", function () {
  // MorphSVGPlugin.convertToPath(
  //   "circle, rect, ellipse, line, polygon, polyline"
  // );
  gsap.defaults({
    duration: 0.65,
    ease: "power2.easeOut",
  });
  setInterval(() => {
    ScrollTrigger.refresh();
  }, 7000);

  // let transition_screen_bg = $(".page-transition-screen-bg");

  ////Set up the transition screen
  ///
  // gsap.timeline().to(transition_screen_bg, {
  //   opacity: 0,
  //   duration: 0.5,
  //   delay: 0.25
  // })

  //Load tags for blog post card
  loadTagsForBlogCard();

  setTimeout(() => {
    $(".w-pagination-wrapper").on("click", function () {
      loadTagsForBlogCard();
    });
  }, 1000);
  //   setTimeout(() => {
  //     // Create the first script element
  //     const cmsLoadScript = document.createElement("script");
  //     cmsLoadScript.src =
  //       "https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js";
  //     cmsLoadScript.async = true;
  //     document.head.appendChild(cmsLoadScript);

  //     // Create the second script element
  //     const cmsFilterScript = document.createElement("script");
  //     cmsFilterScript.src =
  //       "https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js";
  //     cmsFilterScript.async = true;
  //     document.head.appendChild(cmsFilterScript);

  //     console.log("Scripts loaded after 1 second delay");
  //   }, 3000); // 1000ms = 1 second

  $("[tooltip-btn]").on("click", function () {
    let tooltip_text = $(this).find(".tooltip-text");
    gsap
      .timeline()
      .set(tooltip_text, {
        opacity: 1,
      })
      .to(
        tooltip_text,

        {
          opacity: 0,
          duration: 0.75,
          delay: 0.3,
        }
      );
  });

  //Calculate footer actual height and give the height to the spacing div

  if (window.innerHeight < $(".main-footer").innerHeight()) {
    gsap.set(".main-footer", {
      position: "relative",
    });
    gsap.set(".footer-spcing-div", {
      display: "none",
    });
  } else {
    gsap.set(".footer-spcing-div", {
      height: $(".main-footer").innerHeight(),
    });
    $(window).scroll(function () {
      gsap.set(".footer-spcing-div", {
        height: $(".main-footer").innerHeight(),
      });
    });
  }
  mouse_info = {
    x: 0,
    y: 0,
    down: false,
    up: true,
    link_hovering: false,
    arrow_mode: {
      active: false,
      screen_side: undefined,
    },
  };

  //Success story grid
  $(".success-story-grid").each(function () {
    let grid_items = $(this).find(".success-story-grid-item");
    grid_items.each(function (index) {
      let item_order = index + 1;
      if (item_order % 4 === 0 || item_order % 4 === 1) {
        $(this).attr("st-grid-item", "big");
      }
    });
  });
  //Success story grid
  function ensureSwiperLoop(maxVisible = 4) {
    const $swiperEl = $(".swiper.type-1")[0];
    const $wrapper = $(".swiper-wrapper.type-1");
    const $slides = $wrapper.children(".swiper-slide.type-1");
    const slideCount = $slides.length;

    const MIN_SLIDES = maxVisible * 2; // safe baseline (8 when maxVisible = 4)

    // Only duplicate when needed
    if (slideCount > 0 && slideCount <= maxVisible) {
      const clonesNeeded = Math.ceil(MIN_SLIDES / slideCount);

      for (let i = 1; i < clonesNeeded; i++) {
        $slides.each(function () {
          $wrapper.append($(this).clone(true));
        });
      }
    }
  }

  //Slider
  if ($("#success-story-slider").length !== 0) {
    ensureSwiperLoop();
    let swiper = new Swiper($(".swiper.type-1")[0], {
      speed: 800,
      keyboard: true,
      mousewheel: {
        forceToAxis: true,
      },
      // slideToClickedSlide: true,
      // followFinger: false,
      navigation: {
        nextEl: ".swiper-btn.next",
        prevEl: ".swiper-btn.prev",
      },
      allowTouchMove: windowViewPort === "desktop" ? false : true,
      spaceBetween: "2%",
      //   loop: $(".swiper-slide.type-1").length > 3 ? true : false,
      loop: $(".swiper-slide.type-1").length > 3 ? true : false,
      centeredSlides: true,
      initialSlide: 1,
      slidesPerView: "auto",
      breakpoints: {
        // when window width is >= 0px
        0: {
          spaceBetween: "-30%",
        },
        // when window width is >= 768px
        768: {
          spaceBetween: "-20%",
        },
        // when window width is >= 640px
        992: {
          spaceBetween: "-15%",
        },

        1700: {
          //   loop: false,
          spaceBetween: "-10%",
          //   spaceBetween: "-10%",
        },
      },
    });

    window.addEventListener("mousedown", function (e) {
      // console.log("clicked");
      if (
        mouse_info.link_hovering ||
        !mouse_info.arrow_mode.active ||
        windowViewPort !== "desktop"
      )
        return;
      if (mouse_info.arrow_mode.screen_side === "right") {
        swiper.slideNext(500);
      } else {
        swiper.slidePrev(500);
      }
    });
  }

  // window.addEventListener("mousedown", function (e) {
  //   mouse_info.down = true;
  //   mouse_info.up = false;
  //   // console.log(mouse_info.arrow_mode);
  // });
  //Slider

  /////////////////

  // console.log("global window vieport", windowViewPort);
  setInitialSVGState = (type, name, target) => {
    let paths;
    if (type === undefined) {
      paths = document.querySelectorAll("svg path");
    } else if (target === undefined) {
      if (type === "id") {
        paths = document.querySelectorAll(
          `#${name} path,#${name} circle,#${name} rect`
        );
      } else if (type === "class") {
        paths = document.querySelectorAll(
          `.${name} path,.${name} circle,.${name} rect`
        );
      } else if (type === "raw-attributes") {
        paths = document.querySelectorAll(
          `${name} path,${name} circle,${name} rect`
        );
      }
    } else if (target === "path") {
      if (type === "id") {
        paths = document.querySelectorAll(`path#${name}`);
      } else if (type === "class") {
        paths = document.querySelectorAll(`path.${name}`);
      }
    }
    paths.forEach(function (path) {
      let length = path.getTotalLength();
      path.style.transition = path.style.WebkitTransition = "none";
      path.style.strokeDasharray = length + " " + length;
      path.style.strokeDashoffset = length;
    });
  };
  drawSVG = (type, name, { speed, selector, reverse } = {}) => {
    // Default speed is 2
    if (!speed) {
      speed = 2;
    }

    // Get the path(s) to animate based on the type and name parameters
    var paths;
    if (!type) {
      paths = document.querySelectorAll("svg path");
    } else if (!selector) {
      if (type === "id") {
        paths = document.querySelectorAll(
          `#${name} path,#${name} circle,#${name} rect`
        );
      } else if (type === "class") {
        paths = document.querySelectorAll(
          `.${name} path,.${name} circle,.${name} rect`
        );
      } else if (type === "raw-attributes") {
        paths = document.querySelectorAll(
          `${name} path,${name} circle,${name} rect`
        );
      } else if (type === "node-element") {
        paths = document.querySelectorAll(
          `${name} path,${name} circle,${name} rect`
        );
      }
    } else if (selector === "path") {
      if (type === "id") {
        paths = document.querySelectorAll(`path#${name}`);
      } else if (type === "class") {
        paths = document.querySelectorAll(`path.${name}`);
      }
    }

    // Animate each path
    paths.forEach(function (path, index) {
      var length = path.getTotalLength();

      // Clear any previous transition
      path.style.transition = path.style.WebkitTransition = "none";

      // Set up the starting positions
      path.style.strokeDasharray = length + " " + length;
      if (reverse) {
        path.style.strokeDashoffset = 0;
      } else {
        path.style.strokeDashoffset = length;
      }

      // Trigger a layout so styles are calculated & the browser
      // picks up the starting position before animating
      path.getBoundingClientRect();

      // Define the transition
      path.style.transition =
        path.style.WebkitTransition = `stroke-dashoffset ${speed}s ease-in-out`;

      // Animate forwards or backwards
      if (reverse) {
        path.style.strokeDashoffset = length;
      } else {
        path.style.strokeDashoffset = 0;
      }
    });
  };

  // setInterval(() => {
  //   // drawSVG("id", "cta-section");
  //   // drawSVG();
  //   // drawSVG("class", "cta-bottom", 1.5);
  //   // drawSVG("class", "cta-bottom", 1.5);
  // }, 3500);

  // setTimeout(() => {
  $(`[parallax-effect]`).each(function () {
    if (windowViewPort === "desktop") {
      let elementHeight = $(this).innerHeight();
      // console.log(elementHeight);
      let parallax_type = $(this).attr("parallax-type");
      let parallax_faster = $(this).attr("parallax-faster");
      let parallax_start = $(this).attr("parallax-start");
      let parallax_end = $(this).attr("parallax-end");
      // let parallax_end_random = Math.random() * (35 - 5) + 5;
      let parallax_end_random = parallax_faster
        ? -1 * (Math.floor(Math.random() * (50 - 45 + 1)) - 50)
        : -1 * (Math.floor(Math.random() * (30 - 20 + 1)) - 30);
      let parallax_start_random = parallax_faster
        ? 50 - 45 + 45
        : Math.random() * (30 - 20) + 20;

      switch (parallax_type) {
        case "image":
          gsap
            .timeline({
              scrollTrigger: {
                trigger: $(this),
                scrub: 0.75,
              },
              defaults: {
                ease: "none",
              },
            })
            .fromTo(
              $(this),
              {
                backgroundPosition: `50% ${
                  parallax_start !== undefined ? parallax_start : 100
                }%`,
              },
              {
                backgroundPosition: `50% ${
                  parallax_end !== undefined ? parallax_end : 0
                }%`,
              }
            );
          break;
        default:
          if (elementHeight > 480) {
            // $(this).css("backgroundColor", "black");
            parallax_end_random = parallax_faster
              ? -1 * (Math.floor(Math.random() * (18 - 12 + 1)) - 18)
              : -1 * (Math.floor(Math.random() * (10 - 5 + 1)) - 10);
            parallax_start_random = parallax_faster
              ? Math.random() * (18 - 12) + 12
              : Math.random() * (10 - 5) + 5;
            // return;
          }
          gsap
            .timeline({
              scrollTrigger: {
                trigger: $(this),
                scrub: 0.75,
                // markers: true,
                start: "0% 100%",
                end: "100% 0%",
              },
              // defaults: {
              //   ease: "none"
              // }
            })
            .fromTo(
              $(this),
              {
                yPercent: `${
                  parallax_start !== undefined
                    ? parallax_start
                    : parallax_start_random
                }`,
                // yPercent: `${parallax_start !== undefined ? parallax_start : 25}`
              },
              {
                yPercent: `${
                  parallax_end !== undefined
                    ? parallax_end
                    : parallax_end_random * -1
                }`,
              }
            );
      }
    }
  });
  // }, 1500);
  $(`[fade-animation]`).each(function (index) {
    let triggerElement = $(this);
    let delay_duration = $(this).attr("delay-duration");
    if (delay_duration === undefined) {
      delay_duration = 0.1;
    }

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        start: "top 80%",
        end: "bottom center",
        toggleActions: "play none none none",
        // markers: true
        // scrub: 1
        // once: true
      },
    });
    tl.fromTo(
      triggerElement,
      {
        opacity: 0,
        // y: 10
        // scale: 0.92,
      },
      {
        delay: delay_duration,
        // y: 0,
        // scale: 1,
        duration: 0.75,
        opacity: 1,
      }
    );
  });

  ///Text animation

  // setTimeout(() => {
  let SplitFeaturedHeading = new SplitText(`[text-animation]`, {
    type: "lines,words, chars",
    linesClass: "magic-line",
    wordsClass: "magic-word",
    charsClass: "magic-character",
  });
  // }, 300);

  // const buttons = $(".button-primary");

  // // Loop through each button element
  // buttons.each(function () {
  //   // Get the text content of the button
  //   let buttonText;
  //   const p = $(this).find("p");
  //   if (p[0]) {
  //     buttonText = $(this).find("p").text().split("");
  //   } else {
  //     buttonText = $(this).text().split("");
  //   }

  //   // Create a new array to store the new div and span elements
  //   const divsAndSpans = [];

  //   // Loop through each character in the text content
  //   buttonText.forEach(function (char) {
  //     if (char === " ") {
  //       // Create a new div element for the space character
  //       const div = $("<div>").css("display", "inline-block").html("&nbsp;");
  //       // Add the div element to the array
  //       divsAndSpans.push(div);
  //     } else {
  //       // Create a new div element to wrap the span element
  //       const div = $("<div>").css("display", "inline-block");
  //       // Create a new span element for the character
  //       const span = $("<span>").text(char);
  //       // Add the span element to the div element
  //       div.append(span);
  //       // Add the div element to the array
  //       divsAndSpans.push(div);
  //     }
  //   });

  //   // Replace the original button text with the new div and span elements
  //   if (p[0]) {
  //     $(this).find("p").empty().append(divsAndSpans);
  //   } else {
  //     $(this).empty().append(divsAndSpans);
  //   }
  // });

  // Add event listener for mouseenter event
  // buttons.each(function () {
  //   $(this).on("mouseenter", function () {
  //     const $btn = $(this);
  //     gsap.to($btn.find("div span"), {
  //       y: "-5",
  //       duration: 0.25,
  //       ease: "power2.in",
  //       stagger: {
  //         each: 0.06, // Add a stagger of 0.06 seconds
  //         onComplete: function () {
  //           // Animate the text inside the button back down to the original location
  //           gsap.to(this.targets(), {
  //             y: "0",
  //             duration: 0.25,
  //             ease: "power2.in"
  //           });
  //         }
  //       }
  //     });
  //   });
  // });

  ///Check if the whole section needs the same custom text animation for all headings

  setTimeout(() => {
    for (let index = 1; index <= 29; index++) {
      let target = `[all-headings-data-effect${index}]`;
      let not_default_text_animation = $(target).length !== 0;
      // console.log(not_default_text_animation);
      if (not_default_text_animation) {
        $(target).find("[text-animation]").attr(`data-effect${index}`, "true");
        break;
      }
    }
  }, 50);

  // };

  ////Temporary svg draw
  // accent intro
  $("span.a-wrapper").each(function () {
    $(this).append("<span class='accent'></div>");
    $(this).append("<span class='accent-mask'></div>");
  });

  // Select all main elements with a class of ".accent"
  var $accents = $(".a-wrapper");
  // console.log($accents.length);
  $accents.each(function () {
    const $accent = $(this);
    const $mask = $accent.find(".accent-mask");

    const tl33 = gsap.timeline({
      scrollTrigger: {
        trigger: $mask.get(0),
        start: "top 50%", // Start the animation when the top of the element is at the center of the viewport
        end: "center 70%", // End the animation when the bottom of the element is at the center of the viewport
        // markers: true,
        onEnter: () => {
          gsap.to($mask, { x: "124%", duration: 0.8 });
        },
      },
    });

    var intervalId = setInterval(function () {
      // refresh every 2 seconds
      tl33.scrollTrigger.refresh();
      // Check if 6 seconds have elapsed
      if (new Date() - startTime > 30000) {
        clearInterval(intervalId); // Clear the interval
      }
    }, 2000);
    // Record the start time
    var startTime = new Date();
  });

  $(".contact-form-checkbox-field").on("click", function () {
    let f_checkbox = $(this).find(".f-checkbox");
    f_checkbox.toggleClass("is-checked");
    // $(this).find(".contact-form-checkbox").click();
  });

  // $(".contact-form-fied").change(function () {
  //   var inputValue = $(this).val();

  //   if (inputValue !== "") {
  //     console.log("Input field has content");
  //     $(this).closest(".contact-form-field-wrapper").attr("is-active", "true");
  //   } else {
  //     $(this).closest(".contact-form-field-wrapper").attr("is-active", "false");
  //     console.log("Input field is empty");
  //   }
  // });

  setInterval(() => {
    $(".form-field input[type='text'],.form-field textarea").each(function () {
      let input_value = $(this).val();
      let is_active = $(this).closest(".form-field").attr("is-active");

      if (input_value !== "") {
        if (is_active === "true") return;
        $(this).closest(".form-field").attr("is-active", "true");
      } else {
        if (is_active === "false") return;
        $(this).closest(".form-field").attr("is-active", "false");
      }
    });
  }, 250);

  $(".contact-form-block").each(function () {
    $(this).css("min-height", $(this).innerHeight());
  });
});