import React, { useEffect, useRef, useState } from "react";
import NewsTicker from "react-advanced-news-ticker"
import { CarouselItem } from "../ui/carousel";


// Definisikan tipe data untuk carousel item
interface CarouselItem {
  id: number;
  title: string;
  name?: string;
  slug: string;
  fileType?: {
    id: number;
  };
  createdAt: string;
}

const NewsBottom: React.FC = () => {
  const [content, setContent] = useState<CarouselItem[]>([]);
  const newsTickerRef = useRef<any>(null);

  useEffect(() => {
    async function fetchCarouselData() {
      try {
        const response = await CarouselItem();
        setContent(response.data?.data || []);
        console.log("Carousel data:", response.data?.data);
      } catch (error) {
        console.error("Error fetching carousel data:", error);
      }
    }

    fetchCarouselData();
  }, []);

  function formatDateIndonesianWithTime(dateString: string): string {
    const options: Intl.DateTimeFormatOptions = {
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "numeric",
      minute: "numeric",
    };

    const formattedDate = new Date(dateString).toLocaleDateString("id-ID", options);

    return formattedDate.replace("pukul", "-");
  }

  const dummyNews: CarouselItem[] = Array.from({ length: 10 }, (_, index) => ({
    id: index + 1,
    title: `Berita ${index + 1}`,
    name: `Penulis ${index + 1}`,
    slug: "",
    createdAt: new Date().toISOString(),
  }));

  return (
    <section className="section-news fixed-bottom">
      <div className="breaking-news pt-3 pl-3">Breaking News</div>
      <div className="news pt-3">
        {content.length > 0 ? (
          <NewsTicker
            maxRows={1}
            rowHeight={45}
            duration={4000}
            ref={newsTickerRef}
            autoStart={true}
            style={{ listStyleType: "none" }}
          >
            {content.map((item) => (
              <div key={item.id} className="news-item">
                <a
                  style={{ color: "black" }}
                  href={
                    Number(item.fileType?.id) === 1
                      ? `/image/detail/${item.slug}`
                      : Number(item.fileType?.id) === 2
                      ? `/video/detail/${item.slug}`
                      : Number(item.fileType?.id) === 3
                      ? `/document/detail/${item.slug}`
                      : `/audio/detail/${item.slug}`
                  }
                >
                  {item.title}.
                </a>
                <div>{formatDateIndonesianWithTime(item.createdAt)}</div>
              </div>
            ))}
          </NewsTicker>
        ) : (
          <p className="pl-4">Loading...</p> // Tampilkan pesan "Loading..." saat data belum tersedia.
        )}
      </div>
      <div className="navigation pr-0 mr-0">
        <button
          className="arrow-button left"
          onClick={() => {
            newsTickerRef.current?.moveDown();
          }}
        >
          &#9664;
        </button>
        <button
          className="arrow-button right"
          onClick={() => {
            newsTickerRef.current?.moveUp();
          }}
        >
          &#9654;
        </button>
      </div>
    </section>
  );
};

export default NewsBottom;