import ButtonBackHeader from "@/components/buttonBackHeader";
import ReportChartDocument from "@/components/division/reportChartDocument";
import ReportChartEvent from "@/components/division/reportChartEvent";
import ReportChartProgress from "@/components/division/reportChartProgress";
import { InputForm } from "@/components/inputForm";
import SelectForm from "@/components/selectForm";
import Styles from "@/constants/Styles";
import { router, Stack } from "expo-router";
import { useState } from "react";
import { Button, SafeAreaView, ScrollView, View } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

export default function Report() {
   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
   const [error, setError] = useState({
      group: false,
      date: false,
      dateEnd: false,
   });
   const [date, setDate] = useState("");
   const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

   const showDatePicker = () => {
      setDatePickerVisibility(true);
   };

   const hideDatePicker = () => {
      setDatePickerVisibility(false);
   };

   const handleConfirm = (date: any) => {
      setDate(date);
      hideDatePicker();
   };



   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => (
                  <ButtonBackHeader
                     onPress={() => {
                        router.back();
                     }}
                  />
               ),
               headerTitle: "Laporan Divisi",
               headerTitleAlign: "center",
            }}
         />
         <ScrollView>
            <View style={[Styles.p15, Styles.mb100]}>
               <SelectForm
                  bg="white"
                  label="Lembaga Desa"
                  placeholder="Pilih Lembaga Desa"
                  value={chooseGroup.label}
                  required
                  onPress={() => { }}
                  error={error.group}
                  errorText="Lembaga Desa tidak boleh kosong"
               />
               <Button title="Open" onPress={showDatePicker} />
               {/* <DateTimePickerModal
                  isVisible={isDatePickerVisible}
                  mode="date"
                  date={new Date()}
                  onConfirm={handleConfirm}
                  onCancel={hideDatePicker}
               /> */}
               <InputForm
                  bg="white"
                  label="Tanggal Awal"
                  type="default"
                  placeholder="Pilih Tanggal Awal"
                  required
                  error={error.date}
                  errorText="Tanggal awal tidak boleh kosong"
               />
               <InputForm
                  bg="white"
                  label="Tanggal Akhir"
                  type="default"
                  placeholder="Pilih Tanggal Akhir"
                  required
                  error={error.dateEnd}
                  errorText="Tanggal akhir tidak boleh kosong"
               />
               <ReportChartProgress />
               <ReportChartDocument />
               <ReportChartEvent />
            </View>
         </ScrollView>
      </SafeAreaView>
   );
}