import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import DateTimePicker from "@react-native-community/datetimepicker";
import dayjs from "dayjs";
import { 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 onChangeDate = (type: string, selectedDate: any) => {
      if (type === "set") {
         if (mode == "date") {
            onChange(dayjs(selectedDate).format("DD-MM-YYYY"))
         } else if (mode == "time") {
            onChange(dayjs(selectedDate).format("HH:mm"))
         }
         setModal(false)
      } else {
         setModal(false);
      }
   };

   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={() => { }}
                     buttonHide
                     disableSubmit
                     title={mode == "date" ? "Pilih Tanggal" : mode == "time" ? "Pilih Jam" : "Pilih Tanggal & Jam"}>
                     <DateTimePicker
                        value={new Date()}
                        mode={mode}
                        display="spinner"
                        onChange={(event, date) => { onChangeDate(event.type, date) }}
                        onTouchCancel={() => setModal(false)}
                     />
                  </ModalFloat>
               )
            ) : (
               modal && (
                  <DateTimePicker
                     value={new Date()}
                     mode={mode}
                     display="inline"
                     onChange={(event, date) => { onChangeDate(event.type, date) }}
                     onTouchCancel={() => setModal(false)}
                  />
               )
            )
         }
      </>
   )
}