"use client"
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
import useGetQuery from "@/hooks/useGetQuery"
import { images } from "@/lib/images"
import Image from "next/image"
import { useEffect } from "react"
import { useInView } from "react-intersection-observer"
import Loader from "../shared/Loader"
import HeaderDescription from "./HeaderDescription"
import Autoplay from "embla-carousel-autoplay"
import Fade from "embla-carousel-fade"
import getSlider from "@/app/api-requests/getSlider"

export function CarouselHero({ lang }: { lang: Lang }) {
    const { ref, inView } = useInView({
        threshold: 0,
    })
    useEffect(() => {
        if (typeof window !== "undefined") {
            const largeNavbar = document.querySelector("#largeNavBar")
            if (largeNavbar) {
                // @ts-ignore
                largeNavbar.style.position = inView ? "absolute" : "fixed"
            }
        }
    }, [inView])
    // const cccc = useGetQuery<any>({
    //   endpoint: "api/slider_web",
    //   queryKey: ["slider"],
    // })
    ////////////////////////////////////////////////////////
    

  const {slider,isPending} =getSlider()
    ////////////////////////////////////////////////////////
    
    
    if (isPending) return <Loader />
    return (
        <Carousel
            plugins={[Autoplay({ delay: 3000, jump: false }), Fade()]}
            ref={ref}
            className="bg-black bg-opacity-50 w-full h-svh flex items-center justify-center [&>div]:w-full min-h-[500px]"
            opts={{ direction: lang === "ar" ? "rtl" : "ltr" }}
        >
            <CarouselContent>
                {slider?.data?.[0]?.images?.map(({ id, original_url }: { id: string; original_url: string }) => (
                    <CarouselItem key={id} className="relative">
                        <Image
                            src={original_url || images.header}
                            alt="test"
                            className="bg-opacity-50 w-full h-svh object-cover"
                            width={1440}
                            height={1440}
                            priority={true}
                        />
                        <div className="absolute inset-0 bg-black bg-opacity-40" />
                    </CarouselItem>
                ))}
            </CarouselContent>
            <HeaderDescription
                lang={lang}
                title={slider?.data?.[0]?.text?.[lang]}
                description={slider?.data?.[0]?.description?.[lang]}
            />
            <CarouselPrevious className="left-12 border border-5 border-emerald-400 bg-transparent hover:!bg-transparent hidden sm:block" />
            <CarouselNext className="right-12 border border-3 border-emerald-400 bg-transparent hover:!bg-transparent hidden sm:block" />
        </Carousel>
    )
}