"use client";
import { Link } from "@/components/navigation";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { listCuratedContent } from "@/service/curated-content/curated-content";

import {
  formatDateToIndonesian,
  generateLocalizedPath,
  textEllipsis,
} from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
  SortingState,
  ColumnFiltersState,
  VisibilityState,
  PaginationState,
} from "@tanstack/react-table";
import {
  useParams,
  usePathname,
  useRouter,
  useSearchParams,
} from "next/navigation";
import React, { Component, useEffect, useState } from "react";

const ImageSliderPage = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [imageData, setImageData] = useState<any>();
  const [displayImage, setDisplayImage] = useState<any[]>([]);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = React.useState(10);
  const [search, setSearch] = React.useState("");

  useEffect(() => {
    fetchData();
  }, [page, limit, search]);

  // useEffect(() => {
  //   if (imageData?.length > 0) {
  //     shuffleAndSetVideos();
  //     const interval = setInterval(shuffleAndSetVideos, 5000);
  //     return () => clearInterval(interval); // Cleanup interval on unmount
  //   }
  // }, [imageData]);

  const fetchData = async () => {
    const response = await listCuratedContent(search, limit, page - 1, 1, "1");
    console.log(response);

    const data = response?.data?.data;
    const contentData = data?.content;
    setImageData(contentData);
  };

  // const shuffleAndSetVideos = () => {
  //   const shuffled = shuffleArray([...imageData]);
  //   setDisplayImage(shuffled.slice(0, 3));
  // };

  // const shuffleArray = (array: any[]) => {
  //   for (let i = array.length - 1; i > 0; i--) {
  //     const j = Math.floor(Math.random() * (i + 1));
  //     [array[i], array[j]] = [array[j], array[i]];
  //   }
  //   return array;
  // };
  return (
    <Carousel className="w-full pr-3">
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1 flex flex-row md:basis-1/2 lg:basis-1/2 gap-3">
              {imageData?.map((image: any) => (
                <Card
                  key={image?.id}
                  className="hover:sc ale-110 transition-transform duration-300"
                >
                  <Link
                    href={`/shared/curated-content//giat-routine/image/detail/${image.id}`}
                  >
                    <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                      <img
                        src={image?.thumbnailLink}
                        className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg"
                      />
                      <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
                        {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
                        {image?.timezone ? image?.timezone : "WIB"}|{" "}
                        <Icon icon="formkit:eye" width="15" height="15" />
                        {image?.clickCount}{" "}
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="1em"
                          height="1em"
                          viewBox="0 0 20 20"
                        >
                          <path
                            fill="#f00"
                            d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
                          />
                        </svg>{" "}
                      </div>
                      <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
                        {image?.title}
                      </div>
                    </CardContent>
                  </Link>
                </Card>
              ))}
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
    // <div className="mx-3 px-5">
    //   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

    //   </div>
    // </div>
  );
};

export default ImageSliderPage;