import ButtonBackHeader from "@/components/buttonBackHeader"
import HeaderRightCalendarList from "@/components/calendar/headerCalendarList"
import ItemDateCalendar from "@/components/calendar/itemDateCalendar"
import EventItem from "@/components/eventItem"
import Styles from "@/constants/Styles"
import { router, Stack } from "expo-router"
import moment from 'moment'
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>(new Date());
   const listDate = ['2025-03-19', '2025-03-22']

   const components: CalendarComponents = {
      Day: (day: CalendarDay) => {
         const now = String(day.date)
         const today = moment(now).format('YYYY-MM-DD');
         const sign = listDate.includes(today)

         return (
            <ItemDateCalendar text={day.text} isSelected={day.isSelected} isSign={sign} />
         )
      },
   };

   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={{
                        selected: Styles.selectedDate,
                     }}
                  />
               </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>
   )
}