"use client";

import { useKeenSlider } from "keen-slider/react";
import "keen-slider/keen-slider.min.css";
import Image from "next/image";
import assets from "@/assets";
import { useSidebar } from "@/components/ui/sidebar";
import { useEffect, useRef, useCallback } from "react";
import { useRouter } from "nextjs-toploader/app";
import { Banner } from "@/types/product";
import { cn } from "@/lib/utils";

const HomeBannerSliderInner = ({
  banners = [],
  locale,
}: {
  banners: Banner[];
  locale: string;
}) => {
  const { isMobile } = useSidebar();
  const router = useRouter();

  const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
    loop: true,
    mode: "snap",
    slides: { perView: 1 },
  });

  const autoplayRef = useRef<NodeJS.Timeout | null>(null);

  const stopAutoplay = useCallback(() => {
    if (autoplayRef.current) {
      clearInterval(autoplayRef.current);
      autoplayRef.current = null;
    }
  }, []);

  const startAutoplay = useCallback(() => {
    stopAutoplay();
    autoplayRef.current = setInterval(() => slider.current?.next(), 3000);
  }, [slider, stopAutoplay]);

  useEffect(() => {
    if (slider && banners.length > 1) {
      startAutoplay();
    }
    return () => stopAutoplay();
  }, [slider, startAutoplay, stopAutoplay, banners.length]);

  const handleMouseEnter = () => stopAutoplay();
  const handleMouseLeave = () => {
    if (banners.length > 1) startAutoplay();
  };

  return (
    <div
      className="relative"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <div ref={sliderRef} className="keen-slider rounded-lg overflow-hidden">
        {banners.length > 0 ? (
          banners.map((b, i) => (
            <div key={"banner" + i} className="keen-slider__slide relative">
              <div
                className="cursor-pointer"
                {...(b.type === "category"
                  ? {
                      title: b.category.name,
                    }
                  : {})}
                onClick={() =>
                  router.push(
                    `/${locale}/${
                      b.category
                        ? `categories/${b.category.id}`
                        : "promotional-products"
                    }`
                  )
                }
              >
                <img
                  src={b.url}
                  alt="banner"
                  style={{ width: "100%", height: isMobile ? 300 : 500 }}
                />
              </div>
            </div>
          ))
        ) : (
          <Image
            src={assets.img.homeBanner1}
            alt="default banner"
            width={1500}
            style={{ width: "100%", height: isMobile ? 300 : 500 }}
            priority
          />
        )}
      </div>
    </div>
  );
};

export default HomeBannerSliderInner;