import ButtonBackHeader from "@/components/buttonBackHeader";
import ItemHistoryEvent from "@/components/calendar/itemHistoryEvent";
import InputSearch from "@/components/inputSearch";
import Styles from "@/constants/Styles";
import { apiGetCalendarHistory } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native";

type Props = {
   dateStart: Date
   year:string
   data: []
}
export default function CalendarHistory() {
   const { id } = useLocalSearchParams<{ id: string }>();
   const { token, decryptToken } = useAuthSession();
   const [data, setData] = useState<Props[]>([])
   const [search, setSearch] = useState('')

   async function handleLoad() {
      try {
         const hasil = await decryptToken(String(token?.current));
         const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id });
         setData(response.data);
      } catch (error) {
         console.error(error);
      }
   }

   useEffect(() => {
      handleLoad()
   }, [search])

   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Riwayat Acara',
               headerTitleAlign: 'center',
            }}
         />
         <ScrollView>
            <View style={[Styles.p15]}>
               <InputSearch onChange={(val) => setSearch(val)} />
               <ItemHistoryEvent data={data} />
            </View>
         </ScrollView>
      </SafeAreaView>
   )
}