window.addEventListener("load", function () {
  const params_caseStudy = url_params.get("category");
  // console.log("params", url_params, params_caseStudy);

  function select_category_from_params() {
    if (params_caseStudy) {
      const element = document.getElementById("case-study-section"); // Replace "elementId" with the actual ID of the element you want to scroll to
      element.scrollIntoView({ behavior: "auto" });

      $(
        `.case-study-filter-btns-contain .button[category="${params_caseStudy}"]`
      ).click();
    }
  }

  // Setup grid
  init_case_study_grid();

  // update_case_study_grid_item();

  ///Load more function

  $("[load-more-btn-r]").on("click", function () {
    $(
      ".case-study-cms-wrapper.featured .case-study-cms-item[data-visible='false']"
    ).each(function (index) {
      $(this).css("opacity", 0);
      $(this).show();
      $(this).attr({
        "data-visible": "true",
        "need-animation": "true"
      });
    });
    gsap.fromTo(
      ".case-study-cms-wrapper.featured .case-study-cms-item[need-animation='true']",
      {
        scale: 0.95
      },
      {
        scale: 1,
        opacity: 1,
        duration: 0.5
      }
    );

    let expanded_item = $(
      ".case-study-cms-wrapper.featured .case-study-cms-item[origin_row_number]"
    );
    let origin_row_number = expanded_item.attr("origin_row_number");

    expanded_item.css("grid-row", `span ${origin_row_number} / auto`);
    expanded_item.removeAttr("origin_row_number");
    expanded_item.removeAttr("expanded_row_number");

    setTimeout(() => {
      // update_case_study_grid_item();
      $("[load-more-btn-wrapper]").hide();
      ScrollTrigger.refresh();
    }, 300);
  });

  /// Filter function
  let case_study_cards = gsap.utils.toArray(
    ".case-study-cms-wrapper.featured .case-study-cms-item"
  );

  $(".case-study-filter-btns-contain .button,.custom-dropdown-option").on(
    "click",
    function () {
      let is_active = $(this).attr("is--active");
      let chosen_category_name = $(this).attr("category");
      if (is_active === "true") {
        update_filter({ reset_filter: true });

        $(this).removeClass("is--active");
        $(this).attr("is--active", "false");

        let expanded_item = $(
          ".case-study-cms-wrapper.featured .case-study-cms-item[origin_row_number]"
        );
        let expanded_row_number = expanded_item.attr("expanded_row_number");

        expanded_item.css("grid-row", `span ${expanded_row_number} / auto`);
      } else {
        let expanded_item = $(
          ".case-study-cms-wrapper.featured .case-study-cms-item[origin_row_number]"
        );
        let origin_row_number = expanded_item.attr("origin_row_number");

        expanded_item.css("grid-row", `span ${origin_row_number} / auto`);

        $(".case-study-filter-btns-contain .button").removeClass("is--active");
        $(".case-study-filter-btns-contain .button").attr(
          "is--active",
          "false"
        );
        $(this).addClass("is--active");
        $(this).attr("is--active", "true");

        console.log(chosen_category_name);
        update_filter({ chosen_category_name });
      }
    }
  );
  let update_filter = ({ chosen_category_name, reset_filter }) => {
    // card_list.css("min-height", `${card_list_original_height}px`);
    const state = Flip.getState(case_study_cards);

    if (reset_filter) {
      $(`.case-study-cms-wrapper.featured .case-study-cms-item`).css(
        "display",
        "block"
      );
    } else {
      $(`.case-study-cms-wrapper.featured .case-study-cms-item`).css(
        "display",
        "none"
      );
      $(
        `.case-study-cms-wrapper.featured .case-study-cms-item[project-category="${chosen_category_name}"]`
      ).css("display", "block");
    }

    Flip.from(state, {
      duration: 0.7,
      scale: true,
      ease: "power1.inOut",
      stagger: 0.08,
      // absolute: true,
      onEnter: (elements) =>
        gsap.fromTo(
          elements,
          { opacity: 0, scale: 0.85 },
          { opacity: 1, scale: 1, duration: 0.75 }
        ),
      onLeave: (elements) =>
        gsap.to(elements, { opacity: 0, scale: 0, duration: 1 }),
      onComplete: () => {
        // card_list.css("min-height", `auto`);
        ScrollTrigger.refresh();
      }
    });
  };

  let reset_filter = () => {
    $(`.case-study-cms-wrapper.featured .case-study-cms-item`).css(
      "display",
      "block"
    );
  };

  //////////////////////////

  //Animate hero icons
  if (windowViewPort === "mobile") {
    gsap
      .timeline({
        // onComplete: () => {
        //   select_category_from_params();
        // }
      })
      .to(
        ".client-success-hero-bg-mobile .svg-icon.client-success-hero-icon._1",
        {
          delay: 0.85,
          rotation: 0,
          scale: 1,
          opacity: 1,
          duration: 1.1,
          stagger: {
            each: 0.2,
            from: "random"
          }
        }
      )
      .to(
        ".client-success-hero-bg-mobile .svg-icon.client-success-hero-icon._2",
        {
          rotation: 0,
          scale: 1,
          opacity: 1,
          duration: 0.9,
          stagger: {
            each: 0.15,
            from: "random"
          }
        },
        "<"
      )
      .to(
        ".client-success-hero-bg-mobile .svg-icon.client-success-hero-icon._3",
        {
          rotation: 0,
          scale: 1,
          opacity: 1,
          duration: 1.2,
          stagger: {
            each: 0.25,
            from: "random"
          }
        },
        "<"
      );
  } else {
    gsap
      .timeline({
        // onComplete: () => {
        //   select_category_from_params();
        // }
      })
      .to(".client-success-hero-bg .svg-icon.client-success-hero-icon._1", {
        delay: 0.85,
        rotation: 0,
        scale: 1,
        opacity: 1,
        duration: 1.1,
        stagger: {
          each: 0.2,
          from: "random"
        }
      })
      .to(
        ".client-success-hero-bg .svg-icon.client-success-hero-icon._2",
        {
          rotation: 0,
          scale: 1,
          opacity: 1,
          duration: 0.9,
          stagger: {
            each: 0.15,
            from: "random"
          }
        },
        "<"
      )
      .to(
        ".client-success-hero-bg .svg-icon.client-success-hero-icon._3",
        {
          rotation: 0,
          scale: 1,
          opacity: 1,
          duration: 1.2,
          stagger: {
            each: 0.25,
            from: "random"
          }
        },
        "<"
      );
  }

  flkty = new Flickity(".slider1-list", {
    cellAlign: "left",
    contain: true,
    // freeScroll: true,
    // percentPosition: true,
    pageDots: false,
    wrapAround: true,
    // autoPlay: 2000,
    selectedAttraction: 0.01,
    friction: 0.25,
    // friction: 0.15,
    // lower attraction and lower friction
    // slower transitions
    // easier to flick past cells
    prevNextButtons: false,
    draggable: true
  });
  flkty.on("change", function () {
    $(".slider1-item.is-selected").each(function () {
      let original_border_color = $(this).attr("original-border-color");
      // console.log(original_border_color);

      gsap
        .timeline()
        .to(".slider1-container,#see-all-capabilities", {
          borderColor: original_border_color
        })
        .to(
          "#see-all-capabilities",
          {
            color: original_border_color
          },
          "<"
        )
        .to(
          ".absolute-background",
          {
            backgroundColor: original_border_color
          },
          "<"
        );
    });
  });

  $("#slider1-next-btn").on("click", function () {
    flkty.next();
    // flkty.stopPlayer();
  });
  $("#slider1-prev-btn").on("click", function () {
    flkty.previous();
    // flkty.stopPlayer();
  });

  $(".slider1-item").each(function () {
    let current_border_color = $(this).css("border-color");
    $(this).attr("original-border-color", current_border_color);
  });

  //Slider cards on hover
  $(".slider1-item").on("mouseenter", function () {
    // Other items
    $(".slider1-item").each(function () {
      let original_border_color = $(this).attr("original-border-color");
      let new_border_color = convertRGBtoRGBA(original_border_color, 0.3);
      // console.log(border_color);
      $(this).css("border-color", new_border_color);
    });

    ///The item being hovered on
    let original_border_color = $(this).attr("original-border-color");

    $(this).css("border-color", original_border_color);
  });
  $(".slider1-item").on("mouseleave", function () {
    $(".slider1-item").each(function () {
      let original_border_color = $(this).attr("original-border-color");
      $(this).css("border-color", original_border_color);
    });
  });
  // };

  select_category_from_params();
});