/**
 * register uva and uvb lottie animations
 */
const uva = bodymovin.loadAnimation({
  container: document.querySelector(".arrows-lottie.uva"),
  path: "https://cdn.prod.website-files.com/6756709aabfff739299df6e4/675fb805f37fce8a36705c0f_uva.json",
  renderer: "svg",
  loop: false,
  autoplay: false,
});

const uvb = bodymovin.loadAnimation({
  container: document.querySelector(".arrows-lottie.uvb"),
  path: "https://cdn.prod.website-files.com/6756709aabfff739299df6e4/675fb8053ff573152cb4b419_uvb.json",
  renderer: "svg",
  loop: false,
  autoplay: false,
});

var lotties = [uva, uvb];

function initLottie(lotties) {
  lotties.forEach((lottie, i) => {
    lottie.setDirection(1);
    lottie.setSpeed(1.2);
    setTimeout(function () {
      lottie.play();
    }, i * 150);
  });
}

function resetLottie(lotties) {
  lotties.forEach((lottie, i) => {
    lottie.setDirection(-1);
    lottie.setSpeed(5);
    lottie.play();
  });
}

gsap.registerPlugin(ScrollTrigger);

// ScrollTrigger defaults
ScrollTrigger.defaults({
  toggleActions: "restart pause resume none",
  scrub: 1,
});

var modifier = 0.85;

// Keep the modifier in sync with the current viewport size.
// Refresh ScrollTrigger after resize so its measurements stay current.
$(window).on("load resize", function () {
  modifier = window.innerWidth <= 991 ? 0.5 : 0.85;
  ScrollTrigger.refresh();
});

const stages = gsap.utils.toArray(".skin-illustration");
const labels = gsap.utils.toArray(".skin-layer-label");

labels.forEach((label, i) => {
  gsap.set(label, {
    opacity: 0,
    scale: 0.98,
    duration: i * 400,
  });
});

const skinLayer = gsap.timeline({
  scrollTrigger: {
    trigger: ".skin-layers",
    start: "top top",
    markers: false,

    end: () => $(".skin-layers").get(0).scrollHeight * 3 * modifier,

    pin: true,
    anticipatePin: 1,
    scrub: 1,

    onUpdate: (self) => {
      var progress = self.progress;
      var index = progress * stages.length;

      if (index >= 0.3) {
        initLottie(lotties);
      } else {
        resetLottie(lotties);
      }

      if (index < 2) {
        hideTooltip();
      }
    },
  },
});


// Watch for the quiz changing height
const quizSection = document.querySelector(".quiz-section");

if (quizSection) {
  const quizResizeObserver = new ResizeObserver(() => {
    ScrollTrigger.refresh();
  });

  quizResizeObserver.observe(quizSection);
}

gsap.set(stages, {
  opacity: 0,
  scale: 0.98,
});

gsap.set(stages[1], {
  opacity: 0.9,
});

gsap.set(".skin-illustration.first", {
  opacity: 1,
  scale: 1,
});

skinLayer
  .to(
    labels,
    {
      opacity: 1,
      scale: 1,
      ease: "poser1.in",
    },
    "<"
  )
  .to(
    ".skin-illustration.arrows",
    {
      opacity: 1,
      scale: 1,
      ease: "power1.in",
    },
    "<"
  )
  .to(
    ".skin-illustration.cancer",
    {
      opacity: 1,
      scale: 1,
      ease: "power1.in",
    },
    "+=2"
  );

skinLayer.to({}, {}, "+=0.5");

// Refresh once after the page has fully loaded and the layout has settled.
// The short delay allows Webflow/layout-affecting assets to finish settling.
window.addEventListener("load", () => {
  setTimeout(() => {
    ScrollTrigger.refresh();
  }, 100);
});

/*-------quiz swiper---------*/
var quizSwiper = new Swiper(".quiz-swiper", {
  autoHeight: true,
  spaceBetween: 20,
  slidesPerView: 1,
  allowTouchMove: false,
  navigation: {
    nextEl: ".navigation-el-next",
    prevEl: ".navigation-el-prev",
  },
});

var totalScore = 0;

$(document).ready(() => {
  $(".navigation-el-next").addClass("disabled");
  $(".navigation-el-next").val("Check answer");
});

$([$(".w-radio"), $(".navigation-el-next")]).each(function () {
  $(this).click((e) => {
    setTimeout(function () {
      checkAnswer();
    }, 10);
  });
});

function checkAnswer() {
  var current = $(".swiper-slide-active");

  if ($(".swiper-slide-next").hasClass("answer-slide")) {
    $(".navigation-el-next").val("Check answer");
  } else if ($(current).index() == $(".swiper-slide").length - 2) {
    // Last slide before score
    $(".navigation-el-next").val("Check my result");
    $(".navigation-el-next").addClass("check-result");
  } else {
    $(".navigation-el-next").val("Next");
    $(".navigation-el-next").removeClass("check-result");
  }

  if ($(current).index() == $(".swiper-slide").length - 1) {
    // Score slide hide buttons
    $(".swiper-navigation").find(".button").css("display", "none");
  }

  if ($(current).hasClass("answer-slide")) {
    var score = eval(
      $(".swiper-slide-prev")
        .find(".w--redirected-checked")
        .siblings('input[type="radio"]')
        .val()
    );

    totalScore += score;

    $(".current-score").html(totalScore);
    $(current)
      .find(".correct-answer")
      .css(
        "color",
        score > 0 ? "var(--color--myuv-green)" : "var(--color--myuv-red)"
      );
  } else if (
    $(".swiper-slide-active.question-slide").find(".w--redirected-checked")
      .length > 0
  ) {
    // If active slide is answer slide or selected
    $(".navigation-el-next").removeClass("disabled");
  } else {
    $(".navigation-el-next").addClass("disabled");
  }
}

$(".navigation-el-next").click(function (e) {
  if ($(this).hasClass("check-result")) {
    console.log("check result button clicked");
    e.preventDefault();

    setTimeout(function () {
      if (totalScore < 3) {
        $("#score-0-2").css("display", "block");
      } else if (totalScore < 5) {
        $("#score-3-4").css("display", "block");
      } else {
        $("#score-5").css("display", "block");
      }
    }, 10);
  }
});

$("#restart-quiz").click(function (e) {
  e.preventDefault();
  $("#arrows-quiz-form").trigger("reset");
  $(".w--redirected-checked").removeClass("w--redirected-checked");
  quizSwiper.slideTo(0, 20, true);
  $(".swiper-navigation").find(".button").css("display", "block");
  $(".score-block").css("display", "none");
  totalScore = 0;
});

/*---------back to top button ------------*/
$(".back-to-top").click(() => {
  $(document).scrollTop(0);
});

/*---------cloud parallex effect ------------*/
const clouds = gsap.utils.toArray('[class^="cloud-"]');
var parallexTl = gsap.timeline({});

clouds.forEach((cloud, i) => {
  parallexTl.to(cloud, {
    y: -300,
    scrollTrigger: {
      trigger: ".background-wrapper",
      start: "top top",
      end: "bottom top",
      scrub: 1.2,
    },
    ease: "power1.inOut",
  });
});

function hideTooltip() {
  $(".tooltip").css("display", "none");
  $(".indicator-dot").find(".indicator-lottie").css("transform", "scale(1)");
  $(".triangle").css("display", "none");
}

function showTooltip(x) {
  var selector = "#" + $(x).attr("data-id") + "Tooltip";
  $(selector).css("display", "flex");
  $(x).find(".indicator-lottie").css("transform", "scale(1.2)");
  $(x).find(".triangle").css("display", "block");
}

$(".indicator-dot").hover(
  function () {
    $(this).find(".indicator-lottie").css("transform", "scale(1.2)");
  },
  function () {
    $(this).find(".indicator-lottie").css("transform", "scale(1)");
  }
);

$(".close-tooltip").click(function () {
  setTimeout(function () {
    hideTooltip();
  }, 15);
}); // Close tooltip with close button

$(".illustration-section").click(function (e) {
  if (!$(e.target).closest(".indicator-dot").length) {
    hideTooltip();
  }
}); // Close tooltip when clicked outside of tooltip box

$(".indicator-dot").click(function () {
  var selector = "#" + $(this).attr("data-id") + "Tooltip";

  if ($(".tooltip:visible").length > 0) {
    hideTooltip();
  }

  showTooltip(this);
}); // Show tooltip when clicked on indicator dot

$(document).on("keydown", function (e) {
  if (e.key == "Escape" || e.key == "Esc") {
    if ($(".tooltip:visible").length > 0) {
      hideTooltip();
    }
  }
}); // Close tooltip when pressing escape key