"use client";
import { listData } from "@/service/landing/landing";
import { useParams, usePathname, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import { Link } from "@/i18n/routing";
import { getPublicLocaleTimestamp } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";

const HeaderBanner = () => {
  const router = useRouter();
  const params = useParams();
  const poldaName: any = params?.polda_name;
  const asPath: any = usePathname();
  const [content, setContent] = useState([]);

  const [isBannerLoading, setIsBannerLoading] = useState(true);
  const [centerPadding, setCenterPadding] = useState<any>();

  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");
    }

    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,
        },
      },
    ],
  };
  return (
    <div>
      {/* Header */}
      <div className="p-6 lg:px-16 flex flex-col lg:flex-row">
        {isBannerLoading ? (
          <SkeletonTheme highlightColor="#f2f2f2">
            <Skeleton className="w-[100%] h-[480px]" />
          </SkeletonTheme>
        ) : (
          <div className="mt-3">
            <Carousel className="w-full h-full">
              <CarouselContent>
                {content?.map((row: any) => (
                  <CarouselItem key={row?.id} className="basis-1/2">
                    <div className="relative h-[310px] lg:h-[420px]">
                      <img src={row?.thumbnailLink} alt="" className="w-full h-[310px] lg:h-[420px] 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">{row?.categoryName}</span>
                        <Link
                          href={
                            Number(row.fileType?.id) == 1
                              ? `${asPath.includes("/polda/") == true ? asPath : ""}/image/detail/${row.slug}`
                              : Number(row.fileType?.id) == 2
                              ? `/video/detail/${row.slug}`
                              : Number(row.fileType?.id) == 3
                              ? `/document/detail/${row.slug}`
                              : `/audio/detail/${row.slug}`
                          }
                        >
                          <h3>{row.title}</h3>
                        </Link>
                        <p className="text-xs flex flex-row items-center gap-1 mt-1 text-white">
                          {getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
                          <Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
                        </p>
                      </div>
                    </div>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious />
              <CarouselNext />
            </Carousel>
          </div>
        )}
      </div>
    </div>
  );
};

export default HeaderBanner;