import ButtonBackHeader from "@/components/buttonBackHeader"
import ButtonSaveHeader from "@/components/buttonSaveHeader"
import { InputForm } from "@/components/inputForm"
import SelectForm from "@/components/selectForm"
import Styles from "@/constants/Styles"
import { apiGetCalendarOne } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider"
import { Stack, router, useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react"
import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"

export default function EditEventCalendar() {
   const { token, decryptToken } = useAuthSession();
   const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
   const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
   const [data, setData] = useState({
      id: '',
      timeStart: '',
      timeEnd: '',
      dateStart: '',
      dateEnd: '',
      idCalendar: '',
      status: 0,
      title: '',
      desc: '',
      linkMeet: '',
      repeatEventTyper: '',
      repeatValue: 0,
   })

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

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



   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Edit Acara',
               headerTitleAlign: 'center',
               headerRight: () => <ButtonSaveHeader category="update" onPress={() => {
                  ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
                  router.back()
               }} />
            }}
         />
         <ScrollView>
            <View style={[Styles.p15, Styles.mb100]}>
               <InputForm label="Nama Acara" type="default" placeholder="Nama Acara" required bg="white" />
               <InputForm label="Tanggal Acara" type="default" placeholder="Input Tanggal Acara" required bg="white" />
               <View style={[Styles.rowSpaceBetween, Styles.mv10]}>
                  <View style={[{ width: '48%' }]}>
                     <Text style={[Styles.mb05]}>Waktu Awal<Text style={Styles.cError}>*</Text></Text>
                     <View style={[Styles.wrapPaper, Styles.p10]}>
                        <Text style={{ textAlign: 'center' }}>--.--</Text>
                     </View>
                  </View>
                  <View style={[{ width: '48%' }]}>
                     <Text style={[Styles.mb05]}>Waktu Akhir <Text style={Styles.cError}>*</Text></Text>
                     <View style={[Styles.wrapPaper, Styles.p10]}>
                        <Text style={{ textAlign: 'center' }}>--.--</Text>
                     </View>
                  </View>
               </View>
               <InputForm label="Link Meet" type="default" placeholder="Link Meet" bg="white" />
               <SelectForm bg="white" label="Ulangi Acara" placeholder="Ulangi Acara" value={chooseGroup.label} required onPress={() => { }} />
               <InputForm label="Jumlah Pengulangan" type="numeric" placeholder="Jumlah Pengulangan" required bg="white" />
               <InputForm label="Deskripsi" type="default" placeholder="Deskripsi" bg="white" />
            </View>
         </ScrollView>
      </SafeAreaView>
   )
}