"use client";
import { Link } from "@/components/navigation";
import { Card, CardContent } from "@/components/ui/card";
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);

  useEffect(() => {
    initFetch();
  }, []);

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

  const initFetch = async () => {
    const response = await getListContent({
      page: page - 1,
      size: 12,
      sortBy: "createdAt",
      contentTypeId: "2",
    });
    setAllVideoData(response?.data?.data?.content || []);
  };

  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 (
    <div className="mx-3 px-5">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {displayVideos.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>
    </div>
  );
};

export default VideoSliderPage;