"use client";

import { Reveal } from "@/components/landing-page/Reveal";
import { Skeleton } from "@/components/ui/skeleton";
import { listData } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useParams } from "next/navigation";
import React, { useEffect, useState } from "react";

const LatestNews = (props: { type: string }) => {
  const [isLoading, setIsLoading] = useState<any>(true);
  const params = useParams();
  const [content, setContent] = useState<any>([]);
  const [centerPadding, setCenterPadding] = useState<any>();
  const [isBannerLoading, setIsBannerLoading] = useState(true);
  const poldaName: any = params?.polda_name;
  const t = useTranslations("LandingPage");

  const newContent = [
    {
      id: 1,
      thumbnailLink: "/assets/tbnews/latest1.png",
      title: "Tokoh Agama Papua Apresiasi Makan Bergizi Gratis: Investasi Masa Depan Anak-anak Papua",
      categoryName: "NASIONAL",
      createdAt: "17 Feb 2025 - 09:23 WIB",
      description:
        "Jayapura – Sekretaris Sinode Gereja Kemah Injil Masehi Kingmi Indonesia di Tanah Papua, Pendeta Yones Wenda, mengimbau seluruh masyarakat Papua untuk mendukung program Makan Bergizi Gratis (MBG). Menurutnya, program ini sangat penting bagi anak-anak Papua untuk meningkatkan gizi dan kesehatan mereka dalam menunjang pendidikan di sekolah.",
    },
    {
      id: 2,
      thumbnailLink: "/assets/tbnews/image-hero2.png",
      title: "Kesal, Ibu di Sidoarjo Siram Anaknya Usia 3 Tahun dengan Air Mendidih",
      categoryName: "NASIONAL",
      createdAt: "17 Feb 2025 - 09:23 WIB",
      description:
        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
    },
    {
      id: 3,
      thumbnailLink: "/assets/tbnews/image-hero3.png",
      title: "Hari Kedua Tour of Kemala 2025 Meriah, 1.794 Peserta Ramaikan Lintasan di Yogyakarta",
      categoryName: "NASIONAL",
      createdAt: "17 Feb 2025 - 09:23 WIB",
      description:
        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
    },
    {
      id: 4,
      thumbnailLink: "/assets/tbnews/image-hero4.png",
      title: "Polda Bali Amankan Kegiatan GFNY 2025",
      categoryName: "NASIONAL",
      createdAt: "17 Feb 2025 - 09:23 WIB",
      description:
        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
    },
    {
      id: 5,
      thumbnailLink: "/assets/tbnews/image-hero4.png",
      title: "Korban Banjir di Makassar Diberikan Bantuan Langsung Oleh Kapolres",
      categoryName: "NASIONAL",
      createdAt: "17 Feb 2025 - 09:23 WIB",
      description:
        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
    },
    {
      id: 6,
      thumbnailLink: "/assets/tbnews/image-hero4.png",
      title: "Kurang dari 24 Jam, Pelaku Penculikan Balita di Tangsel Berhasil Diringkus",
      categoryName: "NASIONAL",
      createdAt: "17 Feb 2025 - 09:23 WIB",
      description:
        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
    },
  ];

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  // useEffect(() => {
  //   async function fetchCategories() {
  //     const url = "https://netidhub.com/api/csrf";

  //     try {
  //       const response = await fetch(url);

  //       if (!response.ok) {
  //         throw new Error(`HTTP error! status: ${response.status}`);
  //       }

  //       const data = await response.json();
  //       return data; // Menampilkan data yang diterima dari API
  //     } catch (error) {
  //       console.error("Fetch error: ", error);
  //     }
  //   }

  //   fetchCategories();
  //   initFetch();
  // }, []);

  // const initFetch = async () => {
  //   const response = await getHeroData();
  //   console.log(response);
  //   setHeroData(response?.data?.data?.content);
  // };

  useEffect(() => {
    // async function initState() {
    //   const res = await listCarousel();
    //   setContent(res?.data?.data);
    //   setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
    // }

    async function fetchData() {
      const sortBy = poldaName === "popular" ? "clickCount" : "createdAt";
      const res = await listData("1", "", "", 5, 0, sortBy, "", "", poldaName);
      let data = res?.data?.data?.content;
      setContent(data);
      setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
      setIsBannerLoading(false);
      console.log("Done", poldaName);
    }

    fetchData();
  }, [params?.page]);

  return (
    <>
      <Reveal>
        <div className="my-10 px-4 lg:px-20 gap-3">
          <div className="bg-[#c03724] rounded-md p-3 w-fit">
            <p className="text-white font-sans font-semibold">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new", { defaultValue: "New" }) : "Serupa"}</p>
          </div>
        </div>
        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20">
          {isLoading ? (
            <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
              <Skeleton className="h-[310px] lg:h-[420px]  rounded-xl" />
              <div className="space-y-2">
                <Skeleton className="h-4 w-[250px]" />
                <Skeleton className="h-4 w-[200px]" />
              </div>
            </div>
          ) : (
            <div className="w-full lg:w-2/3 lg:h-full">
              {newContent?.slice(0, 1).map((row: any) => (
                <div className="flex flex-col gap-[10px]" key={row?.id}>
                  <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[300px] rounded-sm object-cover" /> <h1 className="font-bold text-[16px] font-sans">{row?.title}</h1>
                  <div className="flex flex-row gap-[10px]">
                    <p className="text-[#c03724] text-[12px] font-sans">{row?.categoryName}</p>
                    <p className="text-[12px] font-sans flex flex-row items-center text-slate-500 dark:text-white">
                      {/* {formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "} */}
                      {row?.createdAt}
                    </p>
                  </div>
                  <p className="text-[14px] font-sans text-justify">{row?.description}</p>
                </div>
              ))}
            </div>
          )}

          {isLoading ? (
            <div className="flex flex-col">
              <div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
                <Skeleton className="h-[73px] w-16 rounded-md" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-[250px]" />
                  <Skeleton className="h-4 w-[200px]" />
                </div>
              </div>
              <div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
                <Skeleton className="h-[73px] w-16 rounded-md" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-[250px]" />
                  <Skeleton className="h-4 w-[200px]" />
                </div>
              </div>
              <div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
                <Skeleton className="h-[73px] w-16 rounded-md" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-[250px]" />
                  <Skeleton className="h-4 w-[200px]" />
                </div>
              </div>
              <div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
                <Skeleton className="h-[73px] w-16 rounded-md" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-[250px]" />
                  <Skeleton className="h-4 w-[200px]" />
                </div>
              </div>
              <div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
                <Skeleton className="h-[73px] w-16 rounded-md" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-[250px]" />
                  <Skeleton className="h-4 w-[200px]" />
                </div>
              </div>
            </div>
          ) : (
            <div className="py-4 lg:py-0 flex flex-col gap-[20px] flex-nowrap w-[95vw] lg:w-[30%] overflow-x-auto">
              {newContent?.slice(1).map((item: any) => (
                <div className="flex gap-3 flex-col lg:w-full">
                  {/* <div className="flex-shrink-0 rounded-lg">
                  <Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
                  </div> */}
                  <div className="w-[280px] lg:w-auto flex flex-col gap-[10px]">
                    <h3 className="font-bold text-[16px] font-sans">{item?.title}</h3>
                    <div className="flex flex-row gap-5">
                      <p className="text-[#c03724] text-[12px] font-sans">{item?.categoryName}</p>
                      <p className="text-[12px] font-sans flex flex-row items-center text-slate-500 dark:text-white">
                        {/* {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "} */}
                        {item?.createdAt}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </Reveal>
    </>
  );
};

export default LatestNews;