import AlertKonfirmasi from "@/components/alertKonfirmasi"
import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonForm } from "@/components/buttonForm"
import { InputForm } from "@/components/inputForm"
import Styles from "@/constants/Styles"
import dayjs from "dayjs"
import { router, Stack, useLocalSearchParams } from "expo-router"
import { useState } from "react"
import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
import DateTimePicker, { DateType, getDefaultStyles } from 'react-native-ui-datepicker';

export default function ProjectAddTask() {
   const { id } = useLocalSearchParams()
   const [range, setRange] = useState<{ startDate: DateType; endDate: DateType; }>({ startDate: undefined, endDate: undefined });
   const defaultStyles = getDefaultStyles()

   const from = range.startDate
      ? dayjs(range.startDate).format('MMM DD, YYYY')
      : '';
   const to = range.endDate ? dayjs(range.endDate).format('MMM DD, YYYY') : '';


   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Tambah Tugas',
               headerTitleAlign: 'center',
            }}
         />
         <ScrollView>
            <View style={[Styles.p15, Styles.mb100]}>
               <View style={[Styles.wrapPaper, Styles.p10]}>
                  <DateTimePicker
                     mode="range"
                     startDate={range.startDate}
                     endDate={range.endDate}
                     onChange={(param) => setRange(param)}
                     styles={defaultStyles}
                  />
               </View>
               <View style={[Styles.rowSpaceBetween, Styles.mv10]}>
                  <View style={[{ width: '48%' }]}>
                     <Text style={[Styles.mb05]}>Tanggal Mulai <Text style={Styles.cError}>*</Text></Text>
                     <View style={[Styles.wrapPaper, Styles.p10]}>
                        <Text style={{ textAlign: 'center' }}>{from}</Text>
                     </View>
                  </View>
                  <View style={[{ width: '48%' }]}>
                     <Text style={[Styles.mb05]}>Tanggal Berakhir <Text style={Styles.cError}>*</Text></Text>
                     <View style={[Styles.wrapPaper, Styles.p10]}>
                        <Text style={{ textAlign: 'center' }}>{to}</Text>
                     </View>
                  </View>
               </View>
               <InputForm label="Judul Tugas" type="default" placeholder="Judul Tugas" required bg="white" />
               <ButtonForm
                  text="SIMPAN"
                  onPress={() => {
                     AlertKonfirmasi({
                        title: 'Konfirmasi',
                        desc: 'Apakah anda yakin ingin menambahkan data?',
                        onPress: () => {
                           ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
                           router.push('/project/4324')
                        }
                     })
                  }} />
            </View>
         </ScrollView>
      </SafeAreaView>
   )
}