"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 { getListContent } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
import image from "next/image";
import React, { useEffect, useState } from "react";

const VideoSliderPage = () => {
  const [allVideoData, setAllVideoData] = useState<any[]>([]);
  const [displayVideos, setDisplayVideos] = 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 (allVideoData?.length > 0) {
  //     shuffleAndSetVideos();
  //     const interval = setInterval(shuffleAndSetVideos, 5000);
  //     return () => clearInterval(interval); // Cleanup interval on unmount
  //   }
  // }, [allVideoData]);

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

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

  // const shuffleAndSetVideos = () => {
  //   const shuffled = shuffleArray([...allVideoData]);
  //   setDisplayVideos(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="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {allVideoData.map((video: any) => (
                <Card
                  key={video?.id}
                  className="hover:scale-110 transition-transform duration-300"
                >
                  <Link
                    href={`/shared/curated-content/giat-routine/video/detail/${video.id}`}
                  >
                    <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                      <img
                        src={video?.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(video?.createdAt))}{" "}
                        {video?.timezone || "WIB"} |
                        <Icon icon="formkit:eye" width="15" height="15" />
                        {video?.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">
                        {video?.title}
                      </div>
                    </CardContent>
                  </Link>
                </Card>
              ))}
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
};

export default VideoSliderPage;