let lenis;
let page_wait_time = 350;
let scrub_val = 1;

const color_list = {
  main_black: "#121918",
};

function initScrollSmoother() {
  // lenis = new Lenis({
  //   lerp: 0.2, // Lower values create a smoother scroll effect
  //   smoothWheel: true, // Enables smooth scrolling for mouse wheel events
  // });

  lenis = new Lenis({
    lerp: 0.15, // Lower values create a smoother scroll effect
    // lerp: 0.2, // Lower values create a smoother scroll effect
    smoothWheel: true, // Enables smooth scrolling for mouse wheel events
    duration: 1.2,
    // duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    orientation: "vertical", // vertical, horizontal
    gestureOrientation: "vertical", // vertical, horizontal, both
    smoothWheel: true,
    wheelMultiplier: 1,
    smoothTouch: false,
    touchMultiplier: 2,
  });

  // lenis.on('scroll', (e) => {
  // console.log(e)
  // })

  lenis.on("scroll", ScrollTrigger.update);

  // gsap.ticker.add((time)=>{
  // lenis.raf(time * 1000)
  // })

  // gsap.ticker.lagSmoothing(0);

  // Define a function to run at each animation frame
  const scrollFn = (time) => {
    lenis.raf(time); // Run Lenis' requestAnimationFrame method
    requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame
  };
  // Start the animation frame loop
  requestAnimationFrame(scrollFn);
}

function initAnimationSetup() {
  gsap.registerPlugin(
    ScrollTrigger,
    Observer,
    Flip,
    DrawSVGPlugin,
    SplitText,
    MorphSVGPlugin,
    MotionPathPlugin
  );

  //Set default duration for gsap
  gsap.defaults({
    ease: "power2.inOut",
    // ease: "power3.out",
    duration: 0.75,
  });

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

  initScrollSmoother();
}

const uniqueId = function () {
  return "id-" + Math.random().toString(36).slice(2, 18);
};

setInitialSVGState = (type, name, target) => {
  let paths;
  let paths_with_dashes;
  let scale_eles = null;
  let scale_eles_no_origin = null;
  let fadein_eles;

  // return;

  let selector_name;

  if (type === "id") {
    selector_name = "#" + name;
  } else if (type === "class") {
    selector_name = "." + name;
  } else {
    selector_name = name;
  }

  if (type === undefined) {
    paths = document.querySelectorAll("svg path:not([no-draw])");
  } else if (target === undefined) {
    paths_with_dashes = $(`${selector_name} .maskReveal .dashedElement`);
    paths_with_dashes.attr("no-draw", "");

    paths = document.querySelectorAll(
      `${selector_name} path:not([no-draw]),
        ${selector_name} circle:not([no-draw]),
        ${selector_name} rect:not([no-draw]),
        ${selector_name} line:not([no-draw])`
    );
    scale_eles = document.querySelectorAll(`${selector_name} [scale-effect]`);
    fadein_eles = document.querySelectorAll(`${selector_name} [fadein-effect]`);
    scale_eles_no_origin = document.querySelectorAll(
      `${selector_name} [scale-effect-no-origin-interfere]`
    );
  } else if (target === "path") {
    paths = document.querySelectorAll(`path${selector_name}:not([no-draw])`);
  }

  if (scale_eles) {
    gsap.set(scale_eles, {
      transformOrigin: "50% 50%",
    });
  }
  if (fadein_eles) {
    gsap.set(fadein_eles, {
      opacity: 0,
    });
  }
  if (scale_eles) {
    gsap.set(scale_eles, {
      opacity: 0,
      scale: 0,
    });
  }
  if (scale_eles_no_origin) {
    gsap.set(scale_eles_no_origin, {
      opacity: 0,
      scale: 0,
    });
  }

  // return;

  try {
    //set up path, line, svg, circle with dashes
    paths_with_dashes.each(function (index) {
      //path, line, rect
      const current_ele = $(this);
      const current_MaskReveal_ele = current_ele.closest(".maskReveal");
      const current_Mask_ele = current_ele.closest("svg").find(".theMask");

      const maskId = uniqueId();
      current_Mask_ele.attr("id", maskId);
      current_MaskReveal_ele.attr("mask", `url(#${maskId})`);

      let clone = current_ele.clone();
      clone.removeAttr("stroke-dasharray");
      gsap.set(clone, { attr: { stroke: "white" }, drawSVG: 0 });
      current_Mask_ele.append(clone);
    });

    gsap.set(paths, {
      drawSVG: "0%",
    });
  } catch (error) {
    // Code to handle the error
    console.log("An error occurred:", error);
  }
};

drawSVG = (type, name, { duration, selector, reverse } = {}) => {
  if (!duration) {
    duration = 2;
  }

  // return;

  // Get the path(s) to animate based on the type and name parameters
  let paths;
  let scale_eles;
  let scale_eles_no_origin;
  let fadein_eles;

  let selector_name;

  if (type === "id") {
    selector_name = "#" + name;
  } else if (type === "class") {
    selector_name = "." + name;
  } else {
    selector_name = name;
  }

  if (!type) {
    paths = document.querySelectorAll("svg path:not([no-draw])");
  } else if (!selector) {
    paths_with_dashes = $(`${selector_name} svg .theMask .dashedElement`);

    paths = document.querySelectorAll(
      `${selector_name} path:not([no-draw]),
        ${selector_name} circle:not([no-draw]),
        ${selector_name} rect:not([no-draw]),
        ${selector_name} line:not([no-draw])`
    );
    scale_eles = document.querySelectorAll(`${selector_name} [scale-effect]`);
    fadein_eles = document.querySelectorAll(`${selector_name} [fadein-effect]`);
    scale_eles_no_origin = document.querySelectorAll(
      `${selector_name} [scale-effect-no-origin-interfere]`
    );
  } else if (selector === "path") {
    paths = document.querySelectorAll(`path${selector_name}:not([no-draw])`);
  }
  // return;
  gsap
    .timeline()

    .add(function () {
      if (reverse) {
        gsap
          .timeline()
          .to(paths, {
            drawSVG: "0%",
            duration,
            ease: "power2.inOut",
          })
          .to(
            paths_with_dashes,
            {
              duration,
              // delay: 0.5,
              stagger: {
                amount: 0.5,
              },
              drawSVG: "0%",
            },
            ">-0.35"
          );
      } else {
        gsap
          .timeline()
          .fromTo(
            paths,
            {
              drawSVG: "0%",
            },
            {
              drawSVG: "100%",
              duration,
              ease: "power2.inOut",
            }
          )
          .to(
            paths_with_dashes,
            {
              duration,
              // delay: 0.5,
              stagger: {
                amount: 0.5,
              },
              drawSVG: "100%",
            },
            ">-0.35"
          );
      }
    });

  if (scale_eles) {
    gsap.to(scale_eles, {
      opacity: 1,
      scale: 1,
      delay: 0.5,
    });
  }
  if (scale_eles_no_origin) {
    gsap.to(scale_eles_no_origin, {
      opacity: 1,
      scale: 1,
      delay: 0.5,
    });
  }
  if (fadein_eles) {
    gsap.to(fadein_eles, {
      opacity: 1,
    });
  }
};

function drawSVGgroup() {}

function currentViewPort() {
  const windowWidth = window.innerWidth;
  let viewport;
  if (windowWidth > 991) {
    viewport = "desktop";
  }
  if (windowWidth <= 991 && windowWidth > 767) {
    viewport = "tablet";
  }
  if (windowWidth <= 767) {
    viewport = "mobile";
  }

  return viewport;
}

let currentViewport = currentViewPort();
let lastWindowWidth = window.innerWidth;

window.addEventListener("resize", () => {
  const newWindowWidth = window.innerWidth;
  const newViewport = currentViewPort();

  if (newWindowWidth !== lastWindowWidth && newViewport !== currentViewport) {
    currentViewport = newViewport;
    location.reload(); // Refresh the browser
  }
});

setTimeout(function () {
  $(`[parallax-effect]`).each(function () {
    if (currentViewPort() === "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() * (80 - 50 + 1)) - 80)
        : -1 * (Math.floor(Math.random() * (60 - 30 + 1)) - 60);
      let parallax_start_random = parallax_faster
        ? 80 - 50 + 50
        : Math.random() * (60 - 30) + 30;

      //Elements have to be a div with image background
      if (parallax_type === "image") {
        gsap
          .timeline({
            scrollTrigger: {
              trigger: $(this),
              // markers: true,
              scrub: 0.75,
            },
            defaults: {
              ease: "none",
            },
          })
          .fromTo(
            $(this),
            {
              backgroundPosition: `50% ${
                parallax_start !== undefined ? parallax_start : 100
              }%`,
            },
            {
              backgroundPosition: `50% ${
                parallax_end !== undefined ? parallax_end : 0
              }%`,
            }
          );
      } else {
        // 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),
            {
              y: `${
                parallax_start !== undefined
                  ? parallax_start
                  : parallax_start_random
              }`,
              // yPercent: `${parallax_start !== undefined ? parallax_start : 25}`
            },
            {
              y: `${
                parallax_end !== undefined
                  ? parallax_end
                  : parallax_end_random * -1
              }`,
            }
          );
      }
    }
  });
}, 1000);
// }, 1500);
$(`[fade-animation]`).each(function (index) {
  // if (windowViewPort !== "desktop") return;
  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,
      ease: "power1.inOut",
      duration: 0.75,
      opacity: 1,
    }
  );
});

function mimicElementSize(sourceSelector, targetSelector) {
  const sourceElement = document.querySelector(sourceSelector);
  const targetElement = document.querySelector(targetSelector);

  if (sourceElement && targetElement) {
    const sourceRect = sourceElement.getBoundingClientRect();

    // Set dimensions to target element
    targetElement.style.width = `${sourceRect.width}px`;
    targetElement.style.height = `${sourceRect.height}px`;
  } else {
    console.error("Source or target element not found.");
  }
}

$(`[sizes-mimic-target]`).each(function () {
  const sourceSelector = $(this).attr("sizes-mimic-target");
  const targetClasses = $(this).attr("class");
  const targetSelector = `.${targetClasses.replace(/\s+/g, ".")}`;
  console.log(sourceSelector, targetSelector);
  mimicElementSize(sourceSelector, targetSelector);
});

$(`[parallax_effect]`).each(function () {
  if (currentViewPort() === "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");
    // console.log("parallax effect running", parallax_start, 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
              }`,
            }
          );
    }
  }
});

// Define breakpoints for tablet and mobile
const BREAKPOINT_TABLET = 992;
const BREAKPOINT_MOBILE = 768;

// Initial state to keep track of current device type
let currentDevice = getDeviceType(window.innerWidth);

// Function to get the current device type
function getDeviceType(width) {
  if (width >= BREAKPOINT_TABLET) {
    return "desktop";
  } else if (width >= BREAKPOINT_MOBILE) {
    return "tablet";
  } else {
    return "mobile";
  }
}

// Callback functions for each device type
function onEnterDesktop() {
  // console.log("Entered Desktop (>= 992px)");
}

function onEnterTablet() {
  // console.log("Entered Tablet (>= 768px and < 992px)");
}

function onEnterMobile() {
  // console.log("Entered Mobile (< 768px)");
}

// Function to handle resize events
function handleResize() {
  const newDevice = getDeviceType(window.innerWidth);

  if (newDevice !== currentDevice) {
    if (newDevice === "desktop") {
      onEnterDesktop();
    } else if (newDevice === "tablet") {
      onEnterTablet();
    } else if (newDevice === "mobile") {
      onEnterMobile();
    }

    // Update the current device type
    currentDevice = newDevice;
  }
}

// Add event listener for resize event
window.addEventListener("resize", handleResize);

// Initial check
handleResize();

function section_w_svgs() {
  $("[section_w_svgs]").each(function (index) {
    const id = `section_w_svgs_${index}`;
    $(this).attr("id", id);

    setInitialSVGState("id", id);

    const triggerEle = $(this);
    gsap.timeline({
      scrollTrigger: {
        trigger: triggerEle,
        start: "top 50%",
        once: true,
        onEnter: () => {
          drawSVG("id", id, { speed: 1.5, reverse: false });
        },
        // end: "+=60%",
        // markers: true,
        // scrub: true,
        // pin: triggerEle,
      },
    });
  });
}
function init_Nav_Footer() {
  $(".navigation").each(function () {});
}

function init_footer() {}
function init_page() {
  gsap.to(".page-wrapper", {
    opacity: 1,
    duration: 1,
    delay: 0.5,
  });
}
function initAnimationSetup() {
  section_w_svgs();
}

// console.log("global");

$("document").ready(function () {
  init_page();
  initAnimationSetup();
  init_Nav_Footer();
  video_section();

  setTimeout(() => {}, 1000);

  if (currentViewPort() === "desktop") {
  }

  //   let case_study_slider_interval = setInterval(() => {
  //     // console.log("Case study slider interval triggered.");
  //     testimonial_swiper_component();
  //     setFontSizeAutomaticallySwiperHeading();
  //     if (case_study_slider_triggered) {
  //       clearInterval(case_study_slider_interval);
  //     }
  //   }, 1000);

  $(window).scroll(function () {
    //check if section is on screen after scroll
  });
});