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



export default function SectionLanding() {

  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 陣列中
    // 在這裡可以進一步處理數據，例如更新狀態或渲染組件
  }
  useEffect(() => {
    initialize();
  }, []); // 空依賴陣列 -> 僅在初次掛載執行一次

  // useEffect(() => {
  //   (async () => {
  //     setEvents(await getNewsData());
  //     console.log('$$$$$$$', events);
  //   })();
  // }, []); // 空依賴陣列 -> 僅在初次掛載執行一次

  return (

    <section className="landing">
      <div className="container landing-container">
        <div className="landing-contentContainer">
          <figure className="landing-visual">
            {/* <img
              className="object-cover object-bottom w-full h-full"
              src="images/bg-landing.png"
              alt="Landing Background"
            /> */}
            <video preload="auto" autoPlay loop muted playsInline className="object-cover object-bottom w-full h-full" src="/video/landing.mp4" poster="./images/bg-landing.png"></video>
          </figure>
          <div className="landing-content">
            <h1 className="text-sp">
              AI for All,
              <br />
              All in AI
            </h1>
            <p className="text-t3-medium">
              Fostering a thriving AI ecosystem in Taiwan
            </p>
            <div className="landing-action">
              <Button
                as="a"
                href={route('about')}
                buttonType="button"
                type="button button--ghost "
                label="About AIA"
              />
              <Button
                as="a"
                href={route('about')}
                buttonType="button"
                type="button button--second "
                label="About AIA"
              />

            </div>
          </div>
        </div>
      </div>
      <div className="landing-container">
        <div className="landing-eventContainer">
          <div ref={carouselRef} className="carousel landing-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}
                      />
                    ))}


                </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>
      </div>
    </section>

  );


}