// Import ========================================================================================================================
import { textareaHeightControl } from '@/js/components/input.js';
import App from '@/layouts/aia/app-layout';
import Button from '@/components/button';
import PageMeta from '@/components/aia/page-meta';
import EventCard from '@/components/aia/event-card';
import SearchBar from '@/components/aia/search-bar';
import { useState } from 'react';
import { usePage } from '@inertiajs/react';
import axios from 'axios';
import { useEffect } from 'react';
import { getNewsData } from '@/lib/utils';




// type PageProps = {
//   events: any;
// }

export default function News(

) {
  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",
    };
  });


  const [newsFilterType, setNewsFilterType] = useState<string>('All');
  const [searchData, setSearchData] = useState<string>('');
  const [page, setPage] = useState<number>(1);





  // async function getNewsData(searchData: string = '', page: number = 1): Promise<any[]> {
  //   const params = {
  //     search: searchData,
  //     // type: newsFilterType.toLowerCase(),
  //     per_page: 1,
  //     page: page,
  //   };
  //   console.log('Fetching news data with params:', params);
  //   try {
  //     const response = await axios.get('/api/news', {
  //       params: params,
  //     });
  //     // console.log('Response data:', response.data);
  //     return response.data.events; // ✅ 正確 return
  //   } catch (error) {
  //     // console.error('Error fetching news data:', error);
  //     return []; // 發生錯誤回傳空陣列，避免程式中斷
  //   }
  // }

  // async function initialize() {
  //   const data = await getNewsData();
  //   setEvents([...data]); // 將獲取到的數據添加到 events 陣列中
  // }

  async function loadMore() {
    const data = await getNewsData(searchData, page);
    setEvents(prevEvents => [...prevEvents, ...data]);
  }


  useEffect(() => {
    // initialize();
    setPage(1); // 重置頁面為1
    (async () => setEvents(await getNewsData(searchData)))();
  }, [searchData]);

  useEffect(() => {
    if (page > 1) {
      loadMore();
    } else {

      // initialize();
      // alert(searchData);
      (async () => setEvents(await getNewsData(searchData)))();


    }

  }, [page]);


  // const eventCards = [
  //   {
  //     eventCardTitle: "Title AI EXPO Taiwan 2025",
  //     eventCardType: "Type",
  //     eventCardDate: "26 Mar 2025",
  //     eventCardLocation: "Taiepi",
  //     eventCardImage: "resources/images/img-event.png",
  //     eventCardLink: "javascript:;",
  //     eventCardLinkText: "for more information",
  //   },
  //   {
  //     eventCardTitle: "Title AI EXPO Taiwan 2025",
  //     eventCardType: "Type",
  //     eventCardDate: "26 Mar 2025",
  //     eventCardLocation: "Taiepi",
  //     eventCardImage: "resources/images/img-event.png",
  //     eventCardLink: "javascript:;",
  //     eventCardLinkText: "for more information",
  //   },
  //   {
  //     eventCardTitle: "Title AI EXPO Taiwan 2025",
  //     eventCardType: "Type",
  //     eventCardDate: "26 Mar 2025",
  //     eventCardLocation: "Taiepi",
  //     eventCardImage: "resources/images/img-event.png",
  //     eventCardLink: "javascript:;",
  //     eventCardLinkText: "for more information",
  //   },
  //   {
  //     eventCardTitle: "Title AI EXPO Taiwan 2025",
  //     eventCardType: "Type",
  //     eventCardDate: "26 Mar 2025",
  //     eventCardLocation: "Taiepi",
  //     eventCardImage: "resources/images/img-event.png",
  //     eventCardLink: "javascript:;",
  //     eventCardLinkText: "for more information",
  //   },
  //   {
  //     eventCardTitle: "Title AI EXPO Taiwan 2025",
  //     eventCardType: "Type",
  //     eventCardDate: "26 Mar 2025",
  //     eventCardLocation: "Taiepi",
  //     eventCardImage: "resources/images/img-event.png",
  //     eventCardLink: "javascript:;",
  //     eventCardLinkText: "for more information",
  //   },
  //   {
  //     eventCardTitle: "Title AI EXPO Taiwan 2025",
  //     eventCardType: "Type",
  //     eventCardDate: "26 Mar 2025",
  //     eventCardLocation: "Taiepi",
  //     eventCardImage: "resources/images/img-event.png",
  //     eventCardLink: "javascript:;",
  //     eventCardLinkText: "for more information",
  //   },
  //   {
  //     eventCardTitle: "Title AI EXPO Taiwan 2025",
  //     eventCardType: "Type",
  //     eventCardDate: "26 Mar 2025",
  //     eventCardLocation: "Taiepi",
  //     eventCardImage: "resources/images/img-event.png",
  //     eventCardLink: "javascript:;",
  //     eventCardLinkText: "for more information",
  //   },
  //   {
  //     eventCardTitle: "Title AI EXPO Taiwan 2025",
  //     eventCardType: "Type",
  //     eventCardDate: "26 Mar 2025",
  //     eventCardLocation: "Taiepi",
  //     eventCardImage: "resources/images/img-event.png",
  //     eventCardLink: "javascript:;",
  //     eventCardLinkText: "for more information",
  //   },

  // ];



  return (
    <App

      pageMeta={
        <PageMeta
          title="News"
          tabClicked={newsFilterType}
          onTabClick={setNewsFilterType}
          tabType="button"
          searchBar={
            <SearchBar
              newsFilterType={newsFilterType}
              searchData={searchData}
              setSearchData={setSearchData}
              resultNum={events.length}

            />
          }

          tabs={[
            { name: 'All', href: '#', },
            { name: 'News', href: '#' },
            { name: 'Event', href: '#' },
          ]}
        />
      }

      mainClass='pageContent'
    >
      {/* {newsFilterType} */}
      < div className='container' >
        {searchData}
        <div className='grid grid-cols-1 gap-24 md:grid-cols-2 md:gap-20 lg:grid-cols-4'>
          {eventCards
            .filter(card => newsFilterType === 'All' || card.eventCardType.toLowerCase() === newsFilterType.toLowerCase())
            .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 className='class="w-full flex justify-center pt-32'>
          <Button
            type="button button--ghost"
            as="button"
            disabled={false}
            buttonType="button"
            label="Show more"
            onClick={() => setPage(prevPage => prevPage + 1)}
          />
        </div>
      </div >
    </App >
  );
}