import Styles from "@/constants/Styles";
import { View, TextInput, Text, Dimensions } from "react-native";

type Props = {
   label?: string;
   placeholder?: string;
   onChange?: (val: string) => void;
   info?: string;
   itemLeft?: React.ReactNode;
   itemRight?: React.ReactNode;
   error?: boolean;
   errorText?: string;
   required?: boolean;
   type: 'default' | 'visible-password' | 'numeric'
   round?: boolean
   width?: number
};


export function InputForm({ label, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round, width }: Props) {
   const lebar = Dimensions.get("window").width;

   if (itemLeft != undefined || itemRight != undefined) {
      return (
         <View style={{ marginBottom: 10 }}>
            {
               label != undefined && (
                  <Text style={[{ marginBottom: 5, textTransform: "capitalize" }, error && Styles.cError]}>
                     {label}
                     {required && (<Text style={Styles.cError}>*</Text>)}
                  </Text>
               )
            }
            <View style={[Styles.inputRoundForm, itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft, round && Styles.round30]}>
               {itemRight != undefined ? itemRight : itemLeft}
               <TextInput
                  placeholder={placeholder}
                  keyboardType={type}
                  onChangeText={onChange}
                  style={{ width: width && lebar * width / 100 }}
               />
            </View>
            {error && (<Text style={[Styles.textInformation, Styles.cError]}>{errorText}</Text>)}
            {info != undefined && (<Text style={[Styles.textInformation, Styles.cGray]}>{info}</Text>)}
         </View>
      )
   }



   return (
      <View style={[Styles.mb10]}>
         {
            label != undefined && (
               <Text style={[Styles.mb05, error && Styles.cError]}>
                  {label}
                  {required && (<Text style={Styles.cError}>*</Text>)}
               </Text>
            )
         }
         <TextInput
            placeholder={placeholder}
            keyboardType={type}
            style={[Styles.inputRoundForm, error && { borderColor: "red" }, round && Styles.round30]}
            onChangeText={onChange}
         />
         {error && (<Text style={[Styles.textInformation, Styles.cError]}>{errorText}</Text>)}
         {info != undefined && (<Text style={[Styles.textInformation, , Styles.cGray]}>{info}</Text>)}
      </View>
   )
}