mediahub-fe/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx

"use client";
import { Link } from "@/i18n/routing";
import { listData } from "@/service/landing/landing";
import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { Icon } from "@/components/ui/icon";
import { useParams } from "next/navigation";

export default function NewsTickerKaltara() {
  const [article, setArticle] = useState<any>([]);
  const [currentNewsIndex, setCurrentNewsIndex] = useState(0);
  const [animate, setAnimate] = useState(false);
  const [tanggal, setTanggal] = useState("");
  const t = useTranslations("LandingPage");
  const [content, setContent] = useState<any>([]);
  const [isBannerLoading, setIsBannerLoading] = useState(true);
  const [centerPadding, setCenterPadding] = useState<any>();
  const params = useParams();
  const poldaName: any = params?.polda_name;

  useEffect(() => {
    const options: Intl.DateTimeFormatOptions = {
      weekday: "long",
      day: "2-digit",
      month: "long",
      year: "numeric",
    };
    const today = new Date().toLocaleDateString("id-ID", options);
    setTanggal(today);
  }, []);

  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,
        },
      },
    ],
  };

  // useEffect(() => {
  //   async function getArticle() {
  //     const response = await getHeroData();
  //     setArticle(response?.data?.data?.content);
  //   }
  //   getArticle();
  // }, []);

  const triggerAnimation = (newIndex: number) => {
    setAnimate(true);
    setTimeout(() => {
      setCurrentNewsIndex(newIndex);
      setAnimate(false);
    }, 300);
  };

  const handlePrev = () => {
    const newIndex = (currentNewsIndex - 1 + content.length) % content.length;
    triggerAnimation(newIndex);
  };

  const handleNext = () => {
    const newIndex = (currentNewsIndex + 1) % content.length;
    triggerAnimation(newIndex);
  };

  useEffect(() => {
    const interval = setInterval(() => {
      triggerAnimation((currentNewsIndex + 1) % content.length);
    }, 7000);

    return () => clearInterval(interval);
  }, [content?.length]);

  return (
    <div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-[#bb3523]">
      <div className="relative px-2 lg:px-4 py-2 text-[10px] lg:text-sm flex justify-between items-center bg-[#bb3523] text-white w-[50%] lg:w-[300px]">
        <span className="mr-0 lg:mr-2 w-full font-bold">{tanggal}</span>
        <div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>
      </div>
      <div className="text-[13px] lg:text-base w-full lg:w-[200px] text-white font-semibold ml-2 lg:ml-5 flex items-center">{t("breakingNews", { defaultValue: "Breaking News" })} :</div>
      <div className={`w-full px-2 lg:px-5 py-1 flex flex-col lg:flex-row items-center gap-1 transition-transform duration-300 ${animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"}`}>
        <Link href={`news/detail/${content[currentNewsIndex]?.id}`} className="hidden lg:block">
          <p className="text-[11px] text-white lg:text-base">{content[currentNewsIndex]?.title}</p>
        </Link>
        <Link href={`news/detail/${content[currentNewsIndex]?.id}`} className="lg:hidden">
          <p className="text-[11px] text-white lg:text-base">{textEllipsis(content[currentNewsIndex]?.title, 28)}</p>
        </Link>
        <p className="text-[8px] lg:text-xs text-white">{formatDateToIndonesian(content[currentNewsIndex]?.createdAt)}</p>
      </div>
      <div className="flex flex-row text-white h-full gap-[1px]">
        <a className="bg-[#bb3523] h-full flex items-center cursor-pointer" onClick={() => handlePrev()}>
          <Icon icon="ic:twotone-arrow-left" fontSize={30} />
        </a>
        <a className="bg-[#bb3523] h-full flex items-center cursor-pointer" onClick={() => handleNext()}>
          <Icon icon="ic:twotone-arrow-right" fontSize={30} />
        </a>
      </div>
    </div>
  );
}