$(document).ready(function () {
  const $ctaBtn = $(
    ".showcase .showcase__container--content-left .find-out-more"
  );
  const userAgent = navigator.userAgent.toLowerCase();
  const isTablet =
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      userAgent
    );
  const showCaseIndicator = document.querySelector(
    ".indicators-control-wrapper"
  );

  function showcaseTracking(element) {
    const title = $(element)
      .closest(".showcase__container--content-left")
      .find("h1")
      .text();
    const CTALink = $(element).attr("href");
    requestTrackingMixpanel("Banner", {
      CTA_Redirect_URL: CTALink,
      Banner_Title: title.trim().replace(/\n/g, "").replace(/\s\s+/g, " "),
    });
  }
  if ($("video").length) {
    const playButtonHeight = $(".vjs-big-play-button");
    $("video").each((_key, item) => {
      let id = $(item).attr("id");
      return videojs(`${id}`, {
        inactivityTimeout: 0,
      });
    });

    playButtonHeight.css("line-height", `${playButtonHeight.height()}px`);

    function videoIsPlaying() {
      showCaseIndicator.classList.remove("d-flex");
      showCaseIndicator.classList.add("d-none");
    }

    function videoIsStopped() {
      showCaseIndicator.classList.remove("d-none");
      showCaseIndicator.classList.add("d-flex");
      $(".carousel").carousel("next");
      $(".carousel").carousel("cycle");
    }

    if (isTablet) {
      $ctaBtn.each(function (_index, value) {
        $(value).on("touchstart", () => showcaseTracking(value));
      });

      $("video").length &&
        $(".video-js").each((_key, player) => {
          let videoId = $(player).attr("id");
          videojs(`${videoId}`).on("touchend", function (e) {
            if (e.target.nodeName !== "VIDEO") {
              videojs(`${videoId}`).on("waiting", function () {
                $(".carousel").carousel("pause");
                $(player).addClass("vjs-custom-waiting");
              });

              videojs(`${videoId}`).on("playing", function () {
                $(player).removeClass("vjs-custom-waiting");
                this.play()
                  .then((_) => {
                    videoIsPlaying();
                    $(".carousel").carousel("pause");
                    requestTrackingMixpanel("Banner", {
                      Banner_Video_Title: $(player).attr("title"),
                    });
                  })
                  .catch((_error) => {
                    console.log(_error);
                  });
              });
            }
          });

          videojs(`${videoId}`).on("userinactive", function () {
            this.pause();
            videoIsStopped();
          });

          videojs(`${videoId}`).on("ended", function () {
            videoIsStopped();
          });
        });
    } else {
      $ctaBtn.each(function (_index, value) {
        $(value).on("click", () => showcaseTracking(value));
      });

      $(".video-js").each((_key, player) => {
        let videoId = $(player).attr("id");
        videojs(`${videoId}`).on("waiting", function () {
          $(".carousel").carousel("pause");
          $(player).addClass("vjs-custom-waiting");
        });

        videojs(`${videoId}`).on("click", function () {
          if (this.paused()) {
            videoIsStopped();
            settingCarouselInterval(
              "showcaseBanner",
              "showcaseBannerIntervalSetting"
            );
          } else {
            videoIsPlaying();
            $(".carousel").carousel("pause");
            requestTrackingMixpanel("Banner", {
              Banner_Video_Title: $(player).attr("title"),
            });
          }
        });

        videojs(`${videoId}`).on("ended", function () {
          videoIsStopped();
        });
      });
    }

    $(".carousel").on("slide.bs.carousel", function () {
      $(".carousel video").trigger("pause");
      showCaseIndicator.classList.remove("d-none");
      showCaseIndicator.classList.add("d-flex");
      $(".carousel").carousel("cycle");
    });
  }

  $(".features.mobile .features__content").on("slide.bs.carousel", function () {
    const threeSeconds = 3000;
    setTimeout(() => {
      const featureTitleMobile = $(
        ".features__content.carousel .carousel-item.active .card .card-header .card-header-text"
      ).text();
      requestTrackingMixpanel(`Features`, {
        Feature_Title: `${featureTitleMobile}`,
      });
    }, threeSeconds);
  });
});