/* ---------- INIT ---------- */
const $quizPage = $(".quiz-content-page");
const $nextBtns = $(".button-next");
const $radios = $("[data-name='quiz-form'] .w-radio");
const question1 = sessionStorage.getItem("question-1");

gsap.set(".quiz-progress-bar-fill", { width: "0%" });

/* ---------- Swiper ---------- */
const quizSwiper = new Swiper(".quiz-swiper", {
  slidesPerView: 1,
  speed: 0,
  allowTouchMove: false,
  edgeSwipeDetection: "prevent",
});

function resetQuiz() {
  /* ---------- Disable next buttons ---------- */
  $nextBtns.not(".start").addClass("disabled-button");
  /* ---------- Reset progress bar ---------- */
  gsap.set(".quiz-progress-bar-fill", { width: "0%" });
}

function init() {
  resetQuiz();
  if (window.location.pathname != "/am-i-addicted") {
    return;
  }
  if (question1 == "" || question1 == null) {
    quizSwiper.slideTo(0);
    resetQuiz();
  } else {
    //populated question 1
    var $questionOne = $('input[name="question-1"][value="' + question1 + '"]');
    $radioBtn = $questionOne.closest(".w-radio");
    $questionOne
      .prop("checked", true)
      .closest(".w-radio")
      .addClass("is-active")
      .find(".w-radio-input")
      .addClass("w--redirected-checked");
    quizSwiper.slideTo(2);
    $('.button-next[data-name="question-1"]').removeClass("disabled-button");
    sessionStorage.removeItem("question-1");
    gsap.to(
      ".progress-bar, .quiz-progress-bar-fill, .progress-bar-character ",
      { display: "block", autoAlpha: 1, duration: 0.2 }
    );
    gsap.to(".quiz-progress-bar-fill", { width: "20%", duration: 0.25 }, ">");
  }
}
$(document).ready(function () {
  init();

  /* ---------- Navigation ---------- */
  $(".button-next").on("click", function () {
    $quizPage.scrollTop(0);
    quizSwiper.allowSlideNext = true;
    quizSwiper.slideNext();
    quizSwiper.allowSlidePrev = false;
  });

  $(".button-prev").on("click", function () {
    $quizPage.scrollTop(0);
    quizSwiper.allowSlidePrev = true;
    quizSwiper.slidePrev();
    quizSwiper.allowSlideNext = false;
  });

  /* ---------- Radio selection ---------- */
  $(document).on("click", ".w-radio", function () {
    //reset sessionStorage if question 1 is re-selected
    if ($(this).find("input").data("name") == "question-1") {
      sessionStorage.clear();
    }
    const $input = $(this).find("input");
    $input.prop("checked", true).trigger("change");

    const name = $input.attr("name");

    $radios.removeClass("is-active");
    $(this)
      .addClass("is-active")
      .find(".w-radio-input")
      .addClass("w--redirected-checked");

    $('.button-next[data-name="' + name + '"]').removeClass("disabled-button");
  });

  /* ---------- Calculate score ---------- */
  $(".button.get-result").on("click", function () {
    let sum = 0;
    let answers = {};
    let value = 0;

    $("[data-name='quiz-form'] input:checked").each(function () {
      const name = $(this).attr("name");
      const label = $(this).siblings(".w-form-label").text().trim();
      const value = Number($(this).val()) || 0;
      sum += value;
      answers[name] = {
        answer_text: label,
        answer_value: value,
      };
    });
    console.log(`Sum: ${sum}`);

    $("#your-score").text(sum);
    $(".score-card-content").hide();

    let resultLevel = "";
    if (sum >= 13) {
      $(".high").show();
      resultLevel = "quiz_score_high";
    } else if (sum >= 4) {
      $(".moderate").show();
      resultLevel = "quiz_score_moderate";
    } else {
      $(".low").show();
      resultLevel = "quiz_score_low";
    }

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: resultLevel,
      quiz_name: "am_i_addicted",
      total_score: sum,
      answers: answers,
    });
  });

  // Share quiz link
  async function fetchImage() {
    const url =
      "https://cdn.prod.website-files.com/64defcbd07e6565f76e4d366/6997dc3a5e3cc9beea6d1d96_7085680db4526e0fed4d413a29fdf079_am-i-addicted-quiz-share-image.jpg";
    const response = await fetch(url.toString());
    const encodedUri = encodeURIComponent(url);
    const instagramUrl = "instagram://library?AssetPath=" + encodedUri;

    const blob = await response.blob();
    const filesArray = [
      new File([blob], "Take the Am I Addicted Quiz.jpg", {
        type: "image/jpeg", // Corrected MIME type
        lastModified: new Date().getTime(),
      }),
    ];

    var shareData = {
      title: "Take the Am I Addicted Quiz",
      text: "",
      files: filesArray,
      url: window.location.href,
    };

    async function share() {
      try {
        if (navigator.share) {
          await navigator.share(shareData);
        } else {
          console.log("Share API not supported on this device.");
        }
      } catch (error) {
        console.log("Unable to share, try later", error);
      }
    }
    // Only enable the share API on mobile devices
    $("#share-link").click(function () {
      var userAgent = navigator.userAgent.toLowerCase();
      if (
        userAgent.match(
          /(android|webos|iphone|ipad|ipod|blackberry|windows phone)/
        ) &&
        navigator.share // Ensure share API is supported
      ) {
        //share on mobile
        copyLink();
        share();
      } else {
        //share on desktop
        toggleShareOn();
      }
    });
  }

  function toggleShareOn() {
    gsap.set(".share-text", { display: "block", opaicty: 1 });
    gsap.set(".share-social-icons", { display: "none", opacity: 0 });
    gsap.to(".share-text", { opacity: 0, display: "none", duration: 0.2 });
    gsap.to(
      ".share-social-icons",
      { display: "flex", opacity: 1, duration: 0.2 },
      ">"
    );
  }
  function resetShare() {
    gsap.to(".share-text", { display: "block", opacity: 1 });
    gsap.to(".share-social-icons", { display: "none", opacity: 0 });
  }

  $(".close-result").click(function () {
    resetShare();
  });

  // Call the fetchImage function
  fetchImage();

  function copyLink() {
    var copyText = window.location.href;
    navigator.clipboard.writeText(copyText);
  }

  $("#copy-clip").click(function () {
    copyLink();
    setTimeout(function () {
      $(".tooltip").html("Link copied!");
    }, 20);
  });

  $("#copy-clip").mouseout(function () {
    $(".tooltip").html("Copy link");
  });
});