"use client";

import { Reveal } from "@/components/landing-page/Reveal";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Icon } from "@/components/ui/icon";
import { Skeleton } from "@/components/ui/skeleton";
import { Link } from "@/i18n/routing";
import { listData } from "@/service/landing/landing";
import { formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
import Image from "next/image";
import { useParams } from "next/navigation";
import React, { useEffect, useState } from "react";

const HeroKaltara = () => {
  const params = useParams();
  const locale = params?.locale;
  const [content, setContent] = useState([]);
  const [centerPadding, setCenterPadding] = useState<any>();
  const [isBannerLoading, setIsBannerLoading] = useState(true);
  const poldaName: any = params?.polda_name;
  const satkerName = params?.satker_name;

  let prefixPath = poldaName ? `/tbnews/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";

  const newContent = [
    {
      id: 1,
      slug: "Brigjen-Pol-Wibowo",
      thumbnailLink: "/assets/tbnews/image-hero1.png",
      title: "Brigjen Pol Wibowo Resmi Dilantik sebagai Dirregident Korlantas Polri",
      categoryName: "NASIONAL",
      createdAt: "16 FEBRUARI 2025 | 16:18 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: 2,
      thumbnailLink: "/assets/tbnews/image-hero2.png",
      title: "KPK dan Polri Tingkatkan Sinergi untuk Pemberantasan Korupsi",
      categoryName: "NASIONAL",
      createdAt: "16 FEBRUARI 2025 | 16:18 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: "Polda Kaltara Menerima Surprise Dari Gubernur Kaltara dan Unsur TNI Dalam Hari Jadi Polda Kaltara ke 7",
      categoryName: "NASIONAL",
      createdAt: "16 FEBRUARI 2025 | 16:18 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: "Kapolda Kaltara Resmikan Gedung Pelayanan SKCK Polres Tana Tidung: Langkah Meningkatkan Pelayanan Publik",
      categoryName: "NASIONAL",
      createdAt: "16 FEBRUARI 2025 | 16:18 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(() => {
    // async function initState() {
    //   const res = await listCarousel();
    //   setContent(res?.data?.data);
    //   setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
    // }

    async function fetchData() {
      const res = await listData("1", "", "", 5, 0, "createdAt", "", "", 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]);

  const settings = {
    className: "center",
    // centerMode: true,
    infinite: true,
    centerPadding,
    slidesToShow: 2,
    autoplay: true,
    speed: 1500,
    autoplaySpeed: 15_000,
    focusOnSelect: true,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: "60px",
          slidesToShow: 1,
        },
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: "20px",
          slidesToShow: 1,
        },
      },
    ],
  };

  const shimmer = (w: number, h: number) => `
  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <linearGradient id="g">
        <stop stop-color="#bcbcbd" offset="20%" />
        <stop stop-color="#f9fafb" offset="50%" />
        <stop stop-color="#bcbcbd" offset="70%" />
      </linearGradient>
    </defs>
    <rect width="${w}" height="${h}" fill="#bcbcbd" />
    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
  </svg>`;

  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));

  return (
    <>
      <Reveal>
        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 w-full py-4 mt-0 lg:mt-2">
          {isBannerLoading ? (
            // <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="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:h-full">
            //   {content?.slice(0, 1)?.map((row: any, index: number) => (
            //     <div className="flex flex-col gap-[10px]" key={index}>
            //       <Link href={prefixPath + `/image/detail/${row.slug}`}>
            //         <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />
            //       </Link>
            //       <h1 className="font-bold font-sans text-[30px]">{row.title}</h1>
            //       <div className="flex flex-row gap-3">
            //         <p className="text-[#c03724] font-sans text-[16px]">{row?.categoryName}</p>
            //         <p className="text-[16px] font-sans flex flex-row items-center text-slate-500 dark:text-white gap-1">
            //           {getPublicLocaleTimestamp(new Date(row?.createdAt))}
            //           {/* {row?.createdAt} */}
            //         </p>
            //       </div>
            //       <p className="text-[16px] font-sans text-justify" dangerouslySetInnerHTML={{ __html: row?.description }} />
            //     </div>
            //   ))}
            // </div>
            <Carousel className="w-full lg:w-2/3 lg:h-full ">
              <CarouselContent>
                {content?.map((row: any) => (
                  <CarouselItem key={row?.id}>
                    <div className="flex flex-col gap-[10px]">
                      <Link href={`${locale}/image/detail/${row?.slug}`}>
                        <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />
                      </Link>
                      <h1 className="font-bold font-sans text-[15px] lg:text-[30px]">{row.title}</h1>
                      <div className="flex flex-row gap-3">
                        <p className="text-[#c03724] font-sans text-[16px]">{row?.categoryName}</p>
                        <p className="text-[16px] font-sans flex flex-row items-center text-slate-500 dark:text-white gap-1">
                          {getPublicLocaleTimestamp(new Date(row?.createdAt))}
                          {/* {row?.createdAt} */}
                        </p>
                      </div>
                      <p className="text-[16px] font-sans text-justify" dangerouslySetInnerHTML={{ __html: row?.description }} />
                    </div>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious className="hover:bg-black ml-1 lg:ml-0" />
              <CarouselNext className="hover:bg-black mr-1 lg:mr-0" />
            </Carousel>
          )}

          {isBannerLoading ? (
            <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 flex-nowrap w-[95vw] lg:w-[30%] overflow-x-auto gap-[20px]">
              {newContent?.slice(1).map((item: any, index: number) => (
                <div className="flex gap-[6px] flex-col lg:w-full" key={index}>
                  <div className="flex-shrink-0 rounded-lg">
                    <Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[120px] object-cover rounded-sm" />
                  </div>
                  <div className="w-[280px] lg:w-auto flex flex-col gap-[6px]">
                    <h3 className="font-bold text-[14px] 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 gap-1">
                        {/* {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} */}
                        {item?.createdAt}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </Reveal>
    </>
  );
};

export default HeroKaltara;