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

export default function NewsTicker() {
  const [article, setArticle] = useState<any>([]);
  const [currentNewsIndex, setCurrentNewsIndex] = useState<any>(0);
  const [animate, setAnimate] = useState(false);
  const params = useParams();
  const locale = params?.locale;
  const t = useTranslations("LandingPage");

  useEffect(() => {
    async function getArticle() {
      const response = await getHeroData(locale == "en");
      setArticle(response?.data?.data?.content);
    }
    getArticle();
  }, []);
  const triggerAnimation = (newIndex: number) => {
    setAnimate(true);
    setTimeout(() => {
      setCurrentNewsIndex(newIndex);
      setAnimate(false);
    }, 300);
  };
  const handlePrev = () => {
    const newIndex = (currentNewsIndex - 1 + article?.length) % article?.length;
    triggerAnimation(newIndex);
  };
  const handleNext = () => {
    const newIndex = (currentNewsIndex + 1) % article?.length;
    triggerAnimation(newIndex);
  };
  useEffect(() => {
    const interval = setInterval(() => {
      triggerAnimation((currentNewsIndex + 1) % article?.length);
    }, 7000);
    return () => clearInterval(interval);
  }, [article?.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-gray-50 border-[#bb3523] border-t-2">
      {" "}
      <div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[10%]">
        {" "}
        <span className="mr-2"></span> {t("breakingNews", { defaultValue: "Breaking News" })}{" "}
        <div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>{" "}
      </div>{" "}
      <div
        className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
          animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
        }`}
      >
        {" "}
        {article?.length > 0 && (
          <>
            {" "}
            <Link
              href={`news/detail/${article[currentNewsIndex]?.id}`}
              className="hidden lg:block"
            >
              {" "}
              <p className="text-sm lg:text-base">
                {article[currentNewsIndex]?.title}
              </p>{" "}
            </Link>{" "}
            <Link
              href={`news/detail/${article[currentNewsIndex]?.id}`}
              className="lg:hidden"
            >
              {" "}
              <p className="text-sm lg:text-base">
                {textEllipsis(article[currentNewsIndex]?.title, 28)}
              </p>{" "}
            </Link>{" "}
            <p className="text-xs">
              {formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}
            </p>{" "}
          </>
        )}{" "}
      </div>{" "}
      <div className="flex flex-row text-white h-full gap-[1px]">
        {" "}
        <a
          className="bg-[#bb3523] h-full flex items-center"
          onClick={() => handlePrev()}
        >
          {" "}
          <Icon icon="ic:twotone-arrow-left" fontSize={30} />{" "}
        </a>{" "}
        <a
          className="bg-[#bb3523] h-full flex items-center"
          onClick={() => handleNext()}
        >
          {" "}
          <Icon icon="ic:twotone-arrow-right" fontSize={30} />{" "}
        </a>{" "}
      </div>{" "}
    </div>
  );
}