import ButtonBackHeader from "@/components/buttonBackHeader";
import ButtonSaveHeader from "@/components/buttonSaveHeader";
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 UpdateProjectTask() {
   const { detail } = 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: 'Edit Tanggal dan Tugas',
               headerTitleAlign: 'center',
               headerRight: () => <ButtonSaveHeader category="create" onPress={() => {
                  ToastAndroid.show('Berhasil menambah data', ToastAndroid.SHORT)
                  router.push('/project/4324')
               }} />
            }}
         />
         <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}
                     styles={{
                        selected: Styles.selectedDate,
                        selected_label: Styles.cWhite,
                        range_fill: Styles.selectRangeDate,
                     }}
                  />
               </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" />
            </View>
         </ScrollView>
      </SafeAreaView>
   )
}