import ButtonBackHeader from "@/components/buttonBackHeader"
import HeaderRightCalendarList from "@/components/calendar/headerCalendarList"
import EventItem from "@/components/eventItem"
import Styles from "@/constants/Styles"
import { router, Stack } from "expo-router"
import { useState } from "react"
import { SafeAreaView, ScrollView, Text, View } from "react-native"
import DateTimePicker, { CalendarComponents, CalendarDay, DateType, getDefaultStyles } from "react-native-ui-datepicker"

export default function CalendarDivision() {
   const defaultStyles = getDefaultStyles()
   const [selected, setSelected] = useState<DateType>()
   const components: CalendarComponents = {
      Day: (day: CalendarDay) => <Text>amalia</Text>,
      // Month: (month: CalendarMonth) => <YourCustomMonth month={month} />
      // etc
   };

   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Kalender',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightCalendarList />
            }}
         />
         <ScrollView>
            <View style={[Styles.p15]}>
               <View style={[Styles.wrapPaper, Styles.p10]}>
                  <DateTimePicker
                     // components={components}
                     mode="single"
                     date={selected}
                     onChange={({ date }) => setSelected(date)}
                     styles={defaultStyles}
                  />
               </View>
               <View style={[Styles.mb15, Styles.mt15]}>
                  <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara</Text>
                  <View style={[Styles.wrapPaper]}>
                     <EventItem category="purple" title="Meeting Pertama" user="Amalia" jamAwal="10.00" jamAkhir="11.00" onPress={()=>{router.push('./calendar/321')}}/>
                     <EventItem category="orange" title="Meeting Pertama" user="Amalia" jamAwal="10.00" jamAkhir="11.00" onPress={()=>{router.push('./calendar/321')}}/>
                  </View>
               </View>
            </View>
         </ScrollView>
      </SafeAreaView>
   )
}