mobile-darmasaba/components/inputDate.tsx

import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { stringToDate, stringToDateTime } from "@/lib/fun_stringToDate";
import DateTimePicker from "@react-native-community/datetimepicker";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import { Platform, Pressable, View } from "react-native";
import Text from "./Text";
import ModalFloat from "./modalFloat";

type Props = {
   label?: string;
   placeholder?: string;
   onChange: (val: string) => void;
   info?: string;
   error?: boolean;
   errorText?: string;
   required?: boolean;
   mode: 'date' | 'datetime' | 'time'
   round?: boolean
   width?: number
   bg?: 'white' | 'transparent'
   value?: string
   disable?: boolean
};


export function InputDate({ label, value, placeholder, onChange, info, disable, error, errorText, required, mode, round, width, }: Props) {
   const [modal, setModal] = useState(false);
   const [valueFix, setValueFix] = useState(new Date())
   const [valueFirst, setValueFirst] = useState(mode == "date" ? dayjs(new Date()).format("DD-MM-YYYY") : mode == "time" ? dayjs(new Date()).format("HH:mm") : "")

   const onChangeDate = (type: string, selectedDate: any) => {
      if (type === "set") {
         let formatted = ""
         if (mode == "date") {
            formatted = dayjs(selectedDate).format("DD-MM-YYYY")
         } else if (mode == "time") {
            formatted = dayjs(selectedDate).format("HH:mm")
         }

         setValueFirst(formatted)

         if (Platform.OS == "android") {
            onChange(formatted)
            setModal(false)
         }
      } else if (type === "dismissed") {
         setModal(false)
      }
   };

   function onSetValue() {
      onChange(valueFirst)
      setModal(false)
   }

   function changeValue() {
      if (value) {
         let valDate = new Date()
         if (mode == "date") {
            valDate = stringToDate(value)
         } else if (mode == "time") {
            valDate = stringToDateTime("", value)
         }
         setValueFix(valDate)
      }
   }

   useEffect(() => {
      if (modal) changeValue()
   }, [value, modal])



   return (
      <>
         <View style={[Styles.mb10]}>
            {
               label != undefined && (
                  <Text style={[Styles.mb05, error && Styles.cError]}>
                     {label}
                     {required && (<Text style={Styles.cError}>*</Text>)}
                  </Text>
               )
            }
            <Pressable style={[Styles.inputRoundForm, disable && ColorsStatus.gray, error && { borderColor: "red" }, { backgroundColor: 'white' }]} onPress={() => setModal(true)} disabled={disable}>
               <Text style={!value && [Styles.cGray]}>{value ? value : placeholder}</Text>
            </Pressable>
            {error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
            {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
         </View>
         {
            Platform.OS === 'ios' ? (
               modal && (
                  <ModalFloat
                     isVisible={modal}
                     setVisible={setModal}
                     onSubmit={() => { onSetValue() }}
                     title={mode == "date" ? "Pilih Tanggal" : mode == "time" ? "Pilih Jam" : "Pilih Tanggal & Jam"}>
                     <DateTimePicker
                        value={valueFix}
                        mode={mode}
                        display="spinner"
                        onChange={(event, date) => { onChangeDate(event.type, date) }}
                        onTouchCancel={() => setModal(false)}
                     />
                  </ModalFloat>
               )
            ) : (
               modal && (
                  <DateTimePicker
                     value={valueFix}
                     mode={mode}
                     display="inline"
                     onChange={(event, date) => { onChangeDate(event.type, date) }}
                     onTouchCancel={() => { setModal(false) }}
                  />
               )
            )
         }
      </>
   )
}