"use client";

import { getIndeksData } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals";
import { Lectern } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React, { useEffect, useState } from "react";

const Indeks: React.FC = () => {
  const pathname = usePathname();
  const [indeksData, setIndeksData] = useState<any>();
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  let count: number = 0;
  useEffect(() => {
    if (indeksData) {
      const intervalId = setInterval(() => {
        // const asal = currentImageIndex + 1;
        // setCurrentImageIndex(asal);
        count = (count + 1) % indeksData.length;
      }, 5000);

      return () => clearInterval(intervalId);
    }
  }, [indeksData]);

  useEffect(() => {
    initFetch();
  }, []);
  const initFetch = async () => {
    const response = await getIndeksData();
    console.log(response);
    setIndeksData(response?.data?.data?.content);
  };

  return (
    <div className="px-4 lg:px-14">
      {/* Hero Left */}
      <div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-auto">
        <div className="lg:w-[60%] w-full lg:h-full">
          {indeksData?.map(
            (indeks: any, index: number) =>
              index == count && (
                <div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
                  <img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg" />
                  <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeks?.categoryName}</span>
                    <Link href="#">
                      <h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2>
                    </Link>
                    <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
                      {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "}
                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
                        <path
                          fill="currentColor"
                          d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
                        />
                      </svg>{" "}
                      {indeks?.clickCount}
                    </p>
                  </div>
                </div>
              )
          )}
        </div>

        {/* Hero Right */}
        <div className="lg:w-[40%] w-full space-y-2">
          {indeksData?.map(
            (indeksRight: any, index: number) =>
              (index == count + 1 || index == count + 2) && (
                <div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
                  <img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg" />
                  <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeksRight?.categoryName}</span>
                    <Link href="#">
                      <h2 className="text-xl font-bold mt-2">{indeksRight?.title}</h2>
                    </Link>
                    <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
                      {formatDateToIndonesian(new Date(indeksRight?.createdAt))} {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "}
                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
                        <path
                          fill="currentColor"
                          d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
                        />
                      </svg>{" "}
                      {indeksRight?.clickCount}
                    </p>
                  </div>
                </div>
              )
          )}
        </div>
      </div>

      {/* Bottom */}
      <div className="px-4 lg:px-7 py-4">
        <div className="flex flex-col gap-4">
          {indeksData?.map(
            (indeksBottom: any, index: number) =>
              index < 3 && (
                <div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
                  <img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-[500px] lg:h-[300px]" />
                  <div className="flex flex-col justify-between w-full">
                    <p className="text-sm">{indeksBottom?.date}</p>
                    <Link href={`${pathname}/detail/${indeksBottom?.id}`} className="text-2xl font-semibold text-gray-800">
                      {indeksBottom?.title}
                    </Link>
                    <p className="text-sm text-gray-600 mt-2">{indeksBottom?.description}</p>
                  </div>
                </div>
              )
          )}
        </div>
      </div>
    </div>
  );
};

export default Indeks;