/**----------------------------------------------------
 * Smooth scroll by lenis
 */
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.defaults({
  toggleActions: "restart pause resume none",
  anticipatedPin: 1,
  scrub: 1,
  //markers: { startColor: "green", endColor: "pink" },
});

var isMobile = /Mobi|Android/i.test(navigator.userAgent);

if (!isMobile) {
  const lenis = new Lenis({
    autoRaf: true,
  });
  lenis.on("scroll", ScrollTrigger.update);
  gsap.ticker.add((time) => {
    lenis.raf(time * 1000); // Convert time from seconds to milliseconds
  });
  gsap.ticker.lagSmoothing(0);
}

$(document).ready(function () {
  /*------Back to top button-----*/
  $(".back-to-top").click(function () {
    $("html, body").animate({ scrollTop: "0" }, 500);
  });
});

/**----------------------------------------------------
 * Swiper js initialisation
 */

if ($(".swiper").length > 0) {
  $(".swiper").each(function () {
    var id = "#" + $(this).attr("id");
    var next = "#" + $(this).find(".right-button").attr("id");
    var prev = "#" + $(this).find(".left-button").attr("id");
    var nSlides = 1;
    if ($(this).attr("slides-per-view")) {
      slidesPerView = parseInt($(this).attr("slides-per-view"));
    } else {
      slidesPerView = 1;
    }

    var mySwiper = new Swiper(id, {
      slidesPerView: slidesPerView,
      spaceBetween: 30,
      virtual: false,
      grabCursor: true,
      loop: false,
      centeredSlides: true,
      allowTouchMove: true,
      navigation: {
        nextEl: next,
        prevEl: prev,
      },
    });

    mySwiper.on("slideChange", function () {
      setTimeout(function () {
        $(
          ".swiper-slide-prev>.flippable-card, .swiper-slide-next>.flippable-card"
        ).each(function () {
          flipFront($(this));
          $(this).siblings(".flipped").toggleClass("flipped");
        });
      }, 10);
    });
  });
}

gsap.set(".back-card", { opacity: 0, transform: "rotateY(180deg)" });
$(".card-flip-button").click(function () {
  var cardSlide = $(this).siblings(".flippable-card");
  $(this).toggleClass("flipped");

  if ($(this).hasClass("flipped")) {
    console.log($(this).hasClass("flipped"));
    flipBack(cardSlide);
  } else {
    flipFront(cardSlide);
  }
});

/**----------------------------------------------------
 * flipping card functions
 * */

function flipBack(cardSlide) {
  var cardFront = $(cardSlide).find(".front-card");
  var cardBack = $(cardSlide).find(".back-card");
  setTimeout(function () {
    $(cardFront).css("pointer-events", "none");
    gsap.to(cardSlide, {
      transform: "rotateY(180deg)",
      duration: 0.3,
      ease: "power1.in",
    });
    gsap.to(cardBack, { opacity: 1, duration: 0 }, "<");
    gsap.to(cardFront, { opacity: 0, duration: 0 }, "<50%");
  }, 10);
}
function flipFront(cardSlide) {
  var cardFront = $(cardSlide).find(".front-card");
  var cardBack = $(cardSlide).find(".back-card");

  setTimeout(function () {
    gsap.to(cardSlide, {
      transform: "rotateY(0deg)",
      duration: 0.3,
      ease: "power1.in",
    });
    gsap.to(cardBack, { opacity: 0, duration: 0 }, "<");
    gsap.to(cardFront, { opacity: 1, duration: 0 }, "<50%");
    $(cardFront).css("pointer-addEventListener", "auto");
  }, 10);
}

/**----------------------------------------------------
 *
 * Start of scroll triggered animation
 * Homepage hero section animation, vape breaks revealing text underneath
 *
 */

if ($(".break-free-section").length > 0) {
  gsap.set(".hero-extra-padding-section", { marginTop: "100vh" });
  const vapeOpen = gsap.timeline({
    scrollTrigger: {
      trigger: ".break-free-hero",
      start: "top top",
      end: "bottom top",
      pin: false,
    },
  });

  const heroPaddingTl = gsap.timeline({
    scrollTrigger: {
      trigger: ".hero-extra-padding-section",
      start: "top 30%",
      end: "10% top",
      pin: false,
    },
  });

  /**
   * randomly move top and bottom section of vapes
   */
  $("document").ready(function () {
    setTimeout(function () {
      const randomY = random(10, 20);
      const randomTime = random(0.8, 1.5);
      //gsap.to(".top-vape", { y: -25 - randomY(1) });
      //gsap.to(".bottom-vape", { y: 25 + randomY(1) });

      moveY(".top-vape", -1);
      moveY(".bottom-vape", -1);

      function moveY(target, direction) {
        gsap.to(target, randomTime(), {
          y:
            target == ".top-vape"
              ? -25 - randomY(direction)
              : 25 + randomY(direction),
          ease: Sine.easeInOut,
          onComplete: moveY,
          onCompleteParams: [target, direction * -1],
        });
      }

      function random(min, max) {
        const delta = max - min;
        return (direction = 1) => (min + delta * Math.random()) * direction;
      }
    }, 1000);
  });

  vapeOpen
    .to(".top-vape", { yPercent: -100, ease: "power2.out", duration: 0.8 }, ">")
    .to(
      ".bottom-vape",
      { yPercent: 100, ease: "power2.out", duration: 0.8 },
      "<"
    )
    .fromTo(
      ".scroll-down-arrow",
      { opacity: 1 },
      { opacity: 0, duration: 0.3 },
      "<"
    )
    .from(".break-free-text-wrapper", { scale: 0.8, ease: "back.out" }, "<")
    .from(
      ".logo-hero",
      { yPercent: -20, opacity: 0, scale: 0.5, duration: 0.3 },
      ">"
    )
    .to({}, {}, ">+60%");

  heroPaddingTl
    .to(".break-free-wrapper", {
      opacity: 0,
      duration: 0.8,
      ease: "power1.out",
    })
    .to(".break-free-hero", { opacity: 0, duration: 0 }, ">");
}

/**
 * What's hiding behind the hit section
 * Scrolltriggered animation, on scroll the yellow vape fades out, revealing the lottie file underneath
 */
if ($(".vape-expanding-section").length > 0) {
  var contentScroll = $(".behind-hit-content-wrapper")[0].scrollHeight;
  gsap.set(".behind-hit-content-wrapper", { position: "absolute" });
  $(window).on("load resize", function () {
    contentScroll = $(".behind-hit-content-wrapper")[0].scrollHeight;
  });

  const end = "+=" + contentScroll;

  /**
   * gsap lottie helper function
   */
  function LottieScrollTrigger(vars) {
    let playhead = { frame: 0 },
      target = gsap.utils.toArray(vars.target)[0],
      speeds = { slow: "+=2000", medium: "+=1000", fast: "+=500" },
      st = {
        trigger: target,
        pin: false,
        start: "top top",
        end: speeds[vars.speed] || "+=1000",
        scrub: 1,
      },
      ctx = gsap.context && gsap.context(),
      animation = lottie.loadAnimation({
        container: target,
        renderer: vars.renderer || "svg",
        loop: false,
        autoplay: false,
        path: vars.path,
        rendererSettings: vars.rendererSettings || {
          preserveAspectRatio: "xMidYMid slice",
        },
      });
    for (let p in vars) {
      // let users override the ScrollTrigger defaults
      st[p] = vars[p];
    }
    animation.addEventListener("DOMLoaded", function () {
      let createTween = function () {
        animation.frameTween = gsap.to(playhead, {
          frame: animation.totalFrames - 1,
          ease: "none",
          onUpdate: () => animation.goToAndStop(playhead.frame, true),
          scrollTrigger: st,
        });
        return () => animation.destroy && animation.destroy();
      };
      ctx && ctx.add ? ctx.add(createTween) : createTween();
      // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes
      ScrollTrigger.sort();
      ScrollTrigger.refresh();
    });
    return animation;
  }

  LottieScrollTrigger({
    target: "#vape-expanding-lottie",
    path: "https://cdn.prod.website-files.com/64defcbd07e6565f76e4d366/6530b708295eb56d6d1c4c0a_vape-parts-separate.json",
    speed: "fast",
    scrub: 1,
    trigger: ".vape-expanding-section",
    start: "top top",
    end: end,
    renderer: "canvas",
  });

  const vapeTl = gsap.timeline({
    scrollTrigger: {
      trigger: ".vape-expanding-section",
      start: "top top",
      end: end + " top",
      pin: false,
    },
  });

  vapeTl
    .to(".vape-yellow", { yPercent: -100 }, "+=20%")
    .from("#vape-expanding-lottie", { opacity: 0, duration: 0.3 }, "<+=5%")
    .to(".vape-yellow", { opacity: 0 }, "<20%")
    .to({}, {}, ">+75%");

  const cardHeight = $(".behind-hit-card")[0].scrollHeight;
  gsap.set(".behind-hit-card", { opacity: 0.1 });
  gsap.set(".behind-hit-content-wrapper", { top: "30%" });

  var vapeExpanding = gsap.timeline({
    scrollTrigger: {
      trigger: ".vape-expanding-section",
      start: "top top",
      end: end + " top",
      pin: true,
      onUpdate: (self) => {
        var cardIndex = Math.floor(
          self.progress * $(".behind-hit-card").length
        );
        gsap.to(".behind-hit-content-wrapper", {
          yPercent: -self.progress * 100,
        });

        $(".behind-hit-card").each(function (i) {
          $(this).toggleClass("active", i <= cardIndex);
          if ($(this).hasClass("active")) {
            gsap.to($(this), { opacity: 1 });
          } else {
            gsap.to($(this), { opacity: 0.1 });
          }
        });
      },
    },
  });
}

/**
 * Homepage Break Free from vaping section
 * background color change
 */
if ($(".how-to-quit-section").length > 0) {
  const bgTl = gsap.timeline({
    scrollTrigger: {
      trigger: ".how-to-quit-section",
      start: "top 35%",
      end: "top 30%",
      duration: 0.6,
      ease: "power2.out",
    },
  });
  gsap.set(".section-padding", { backgroundColor: "#3b3c40" });
  gsap.set($(".how-to-quit-section, .footer-links"), { color: "#d5cfc8" });
  gsap.set(".change-to-light", {
    backgroundColor: "#3b3c40",
    color: "#d5cfc8",
  });
  gsap.set(".docked-nav-wrapper", {
    backgroundColor: "rgba(51, 51, 51, 0.85)",
  });

  bgTl
    .to(".blue-gradient-background", { opacity: 1 })
    .to($(".how-to-quit-section, .footer-links"), { color: "#3b3c40" }, "<")
    .to(".section-padding", { backgroundColor: "transparent" }, "<")
    .to(".home-footer", { color: "#3b3c40" }, "<")
    .to(".change-to-light", { backgroundColor: "white", color: "#3b3c40" }, "<")
    .to(
      ".docked-nav-wrapper",
      { backgroundColor: "rgba(255, 255, 255, 0.4)" },
      "<"
    );
}

/**
 * Saving calculator
 */
const $calculateBtn = $(".calculate-btn");
const $resultPanel = $(".result-panel");

$calculateBtn.addClass("disabled");
gsap.set($resultPanel, { display: "none", opacity: 0 });

$(document).on("click", ".vape-calculator-button", function () {
  var $group = $(this).closest(".vape-calculator-radio-button-group");

  $group.find(".w-radio").removeClass("is-active");
  $(this).addClass("is-active");

  const days = $("input[name='days']:checked").val();
  const cost = $("input[name='cost']:checked").val();

  if (days && cost) {
    $calculateBtn.removeClass("disabled");
  } else {
    $calculateBtn.addClass("disabled");
  }
});

$calculateBtn.on("click", function (e) {
  e.preventDefault();

  if ($(this).hasClass("disabled")) return;

  const costLabel = $("input[name='cost']:checked")
    .siblings(".w-form-label")
    .text()
    .trim();
  const dayLabel = $("input[name='days']:checked")
    .siblings(".w-form-label")
    .text()
    .trim();

  const minDay = Number($("input[name='days']:checked").val());
  const minCost = Number($("input[name='cost']:checked").val().split("-")[0]);
  const maxCost = Number($("input[name='cost']:checked").val().split("-")[1]);

  const currencyFormatter = new Intl.NumberFormat("en-AU", {
    style: "currency",
    currency: "AUD",
    maximumFractionDigits: 0,
  });

  gsap.to($resultPanel, { display: "block", opacity: 1, duration: 0.3 });

  const monthRange =
    currencyFormatter.format(Math.round((30 / minDay) * minCost * 100) / 100) +
    " to " +
    currencyFormatter.format(Math.round((30 / minDay) * maxCost * 100) / 100);
  const threeMRange =
    currencyFormatter.format(Math.round((90 / minDay) * minCost * 100) / 100) +
    " to " +
    currencyFormatter.format(Math.round((90 / minDay) * maxCost * 100) / 100);

  const yearRange =
    currencyFormatter.format(Math.round((365 / minDay) * minCost * 100) / 100) +
    " to " +
    currencyFormatter.format(Math.round((365 / minDay) * maxCost * 100) / 100);

  $("#savings-one-month").text(monthRange);
  $("#savings-three-months").text(threeMRange);
  $("#savings-one-year").text(yearRange);

  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "calculate_savings",
    new_vape_freq: dayLabel,
    new_vape_cost_range: costLabel,
    total_saving_per_month: monthRange,
    total_saving_per_quarter: threeMRange,
    total_saving_per_year: yearRange,
  });

  /*const isLowest = $("input[name='cost']:checked")
    .siblings(".w-radio-input")
    .hasClass("min-value");

  if (isLowest) {
    $(".as-much-as-label").hide();
    $(".plus-label").show();
  } else {
    $(".plus-label").hide();
    $(".as-much-as-label").show();
  }*/
});

/**
 * Get youtube thumbnail images real vaping stories video slider
 */
$(document).ready(function () {
  $(".real-story-lightbox").each(function () {
    var jsonData = $(this).find(".w-json")[0].innerHTML;
    var data = JSON.parse(jsonData);
    var youtubeUrl = data.items[0].url;
    var isYT = youtubeUrl.includes("youtube");
    if (isYT) {
      var videoID = youtubeUrl.split("v=")[1].split("&")[0]; // Extracts video ID from the URL
      var imgSrc = "https://i.ytimg.com/vi/" + videoID + "/maxresdefault.jpg"; // Generates the image URL
      var placeholderSrc =
        "https://cdn.prod.website-files.com/img/placeholder-thumb.svg";
      if (
        $(this).find(".real-story-lightbox-thumbnail").attr("src") ==
        placeholderSrc
      )
        $(this).find(".real-story-lightbox-thumbnail").attr("src", imgSrc);
    }
  });
});

/**
 * Homepage quiz question 1
 */
$("#quiz-question-1-btn").on("click", function (e) {
  e.preventDefault();

  sessionStorage.setItem(
    "question-1",
    $('[data-name="quiz-form"] input:checked').val() ?? ""
  );

  window.location.href = "/am-i-addicted";
});