// === import ===
import EventCard from '@/components/aia/event-card';
import { useState, useEffect, useRef } from 'react';
import { landing } from '/data/www/aia-official-en-main/web/src/js/index.js';// 重新 pull 的時候 要重新把 landing 改為 export 的函數
import { getNewsData } from '@/lib/utils';
import { carousel } from '/data/www/aia-official-en-main/web/src/js/patterns/carousel.js';// 重新 pull 的時候 要重新把 landing 改為 export 的函數

type LatestProps = {
  landingEvents: Array<{
    eventCardTitle: string;
    eventCardType: string;
    eventCardDate: string;
    eventCardLocation: string;
    eventCardImage: string;
    eventCardLink: string;
    eventCardLinkText: string;
  }>;
};

export default function Latest(
  { landingEvents }: LatestProps
) {


  // const [eventCards, setEventCards] = useState<{ type: string; title: string; date: string; location: string; image: string; link: string; }[]>([]);
  const carouselRef = useRef(null);
  const [events, setEvents] = useState<any[]>([]);
  const eventCards = events.map((event: any) => {
    return {
      eventCardTitle: event.acf.title,
      eventCardType: event.acf.type,
      eventCardDate: event.acf.date,
      eventCardLocation: event.acf.address,
      eventCardImage: event.acf.imageUrl,
      eventCardLink: route('event-detail', { id: event.id }),
      eventCardLinkText: "for more information",
    };
  });

  async function initialize() {
    const data = await getNewsData('', 1, 2);
    setEvents([...data]); // 將獲取到的數據添加到 events 陣列中
    carousel(carouselRef.current);
    // 在這裡可以進一步處理數據，例如更新狀態或渲染組件
  }
  useEffect(() => {
    // initialize();
    setEvents(landingEvents);
  }, []); // 空依賴陣列 -> 僅在初次掛載執行一次



  return (
    <section className="eventNewsCarousel">
      <div className="container eventNewsCarousel-container">
        <hgroup className="eventNewsCarousel-header">
          <h2 className="eventNewsCarousel-heading text-h1-bold">Latest</h2>
          <button type="button" className="button button--second eventNewsCarousel-action">
            <span className="button-text">See all News & Events</span>
          </button>
        </hgroup>
        <div ref={carouselRef} className="carousel eventNewsCarousel-carousel">
          <div className="carousel-container">
            <div className="carousel-scrollContainer">
              <div className="carousel-list">
                {eventCards
                  .map((card: any, index: number) => (
                    <EventCard
                      key={index}
                      darkBackground={false}
                      eventCardTitle={card.eventCardTitle}
                      eventCardType={card.eventCardType}
                      eventCardDate={card.eventCardDate}
                      eventCardLocation={card.eventCardLocation}
                      eventCardImage={card.eventCardImage}
                      eventCardLink={card.eventCardLink}
                      eventCardLinkText={card.eventCardLinkText}
                    />
                  ))}
                <EventCard
                />
                <EventCard
                />
                <EventCard
                />
                <EventCard
                />
                <EventCard
                />
                <EventCard
                />
              </div>
            </div>
          </div>
          <nav className="carousel-controlContainer">
            <button type="button" className="button button--icon carousel-control carousel-control--prev">
              <i className="icon-arrowLeft"></i>
            </button>
            <button type="button" className="button button--icon carousel-control carousel-control--next">
              <i className="icon-arrowRight"></i>
            </button>
          </nav>
        </div>
      </div>
    </section>
  );
}