import { horizontalLoop } from "@/app/helper/horizontalloop";
import { useIsMobile } from "@/hooks/useIsMobile";
import { cn } from "@/lib/utils";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { Draggable } from "gsap/all";
import React, { useEffect, useRef, useState } from "react";
gsap.registerPlugin(Draggable);

// Main App component
export default function App() {
  const sliderRef = useRef(null);
  const slidesRef = useRef(null);
  const slideItems = useRef([]);

  // Sample data for the slides. Duplicated for the infinite loop effect.
  const slides = [
    {
      key: "kitchen",
      bg: "/images/kitchen/kitchen-2.jpg",
      title: "Kitchen Renovation",
      text: "We can help you create a kitchen or dining area in your commercial space.",
    },
    {
      key: "bathroom",
      bg: "/images/bathroom/bathroom-3.jpg",
      title: "Bathroom Renovation",
      text: "Reinvent the most utilitarian room in the house with ideas for powder rooms, master baths, and more.",
    },
    {
      key: "full-house",
      bg: "/images/kitchen/kitchen-3.jpg",
      title: "Full House Renovation",
      text: "From structural upgrades to fine finishes, we manage full-home makeovers end to end.",
    },
  ];

  const isMobile = useIsMobile();

  useGSAP(() => {
    console.log(slideItems.current);

    const wrapper = slidesRef.current;

    const boxes = slideItems.current;

    let activeElement;
    const loop = horizontalLoop(boxes, {
      reversed: false,
      paused: false, // 👈 start paused
      draggable: true,
      paddingRight: 16,
      onChange: (element, index) => {
        // when the active element changes, this function gets called.
        activeElement && activeElement.classList.remove("active");
        element.classList.add("active");
        activeElement = element;
      },
    });

    boxes.forEach((box, i) =>
      box.addEventListener("click", () =>
        loop.toIndex(i, {
          duration: 0.8,
          ease: "power1.inOut",
        })
      )
    );

    return () => {
      loop.kill(); // Important for cleaning up the GSAP animation
    };
  }, []);

  return (
    <div className="relative  w-full py-2 px-2 overflow-hidden" ref={sliderRef}>
      <div
        className="flex flex-nowrap w-max px-4 cursor-grab md:!cursor-none space-x-4"
        ref={slidesRef}
      >
        {slides.map((slide, i) => (
          <div
            key={slide.key + "-" + i}
            className={cn(
              "slide relative h-full flex-shrink-0 cursor-grab md:cursor-none w-[50vw] md:w-[30vw]"
            )}
            ref={(ref) => (slideItems.current[i] = ref)}
          >
            <img
              src={slide.bg}
              className="w-full h-[400px] object-cover rounded-[2rem]"
              alt={slide.title}
            />
            <div className="absolute inset-x-2 rounded-[1.5rem] bottom-2 bg-white/90 p-4 flex flex-col items-center gap-2 text-black">
              <span className="font-bold text-base">{slide.title}</span>{" "}
              <span className="text-base text-center">{slide.text}</span>{" "}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}