import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Dimensions, Platform, TextInput, View } from "react-native";
import Text from "./Text";

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
   bg?: string
   value?: string
   disable?: boolean
   multiline?: boolean
   mb?: boolean
   focus?: boolean
};


export function InputForm({ label, value, placeholder, onChange, info, disable, error, errorText, required, itemLeft, itemRight, type, round, width, bg, multiline, mb = true, focus }: Props) {
   const lebar = Dimensions.get("window").width;
   const { colors } = useTheme();

   if (itemLeft != undefined || itemRight != undefined) {
      const hasBothItems = itemLeft != undefined && itemRight != undefined;
      const baseInputWidth = width ? lebar * width / 100 : lebar * 0.78;
      // When both icons present, shrink TextInput by right icon size to keep container width stable
      const textInputWidth = hasBothItems ? baseInputWidth - 30 : baseInputWidth;
      return (
         <View style={[mb && Styles.mb10]}>
            {
               label != undefined && (
                  <Text style={[{ marginBottom: 5, textTransform: "capitalize", color: colors.text }, error && { color: colors.error }]}>
                     {label}
                     {required && (<Text style={{ color: colors.error }}>*</Text>)}
                  </Text>
               )
            }
            <View style={[
               Styles.inputRoundForm,
               hasBothItems ? Styles.inputRoundFormLeft : itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
               multiline && { alignItems: 'flex-end' },
               round && Styles.round30,
               {
                  backgroundColor: bg == "transparent" ? "transparent" : colors.input,
               },
               error ? { borderColor: colors.error } : { borderColor: colors.icon + '20' },
               Platform.OS == 'ios' ? { paddingVertical: 10 } : { paddingVertical: 0, minHeight: 40 },
               multiline
                  ? { alignItems: "flex-end" }
                  : { alignItems: "center" },
            ]}>
               {hasBothItems ? itemLeft : (itemRight != undefined ? itemRight : itemLeft)}
               <TextInput
                  editable={!disable}
                  value={value}
                  placeholder={placeholder}
                  keyboardType={type}
                  onChangeText={onChange}
                  placeholderTextColor={colors.dimmed}
                  multiline={multiline}
                  numberOfLines={3}
                  style={[
                     Styles.mh05,
                     multiline && { height: '100%', maxHeight: 100 },
                     { width: textInputWidth, color: colors.text },
                     Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 4 } : { paddingVertical: 0 },
                  ]}
               />
               {hasBothItems && itemRight}
            </View>
            {error && (<Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>{errorText}</Text>)}
            {info != undefined && (<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mt05]}>{info}</Text>)}
         </View>
      )
   }



   return (
      <View style={[Styles.mb10]}>
         {
            label != undefined && (
               <Text style={[Styles.mb05, error && { color: colors.error }, { color: colors.text }]}>
                  {label}
                  {required && (<Text style={{ color: colors.error }}>*</Text>)}
               </Text>
            )
         }
         <TextInput
            value={value}
            placeholder={placeholder}
            keyboardType={type}
            editable={!disable}
            style={[
               Styles.inputRoundForm,
               Platform.OS == 'ios' ? { paddingVertical: 11 } : { paddingVertical: 6 },
               error ? { borderColor: colors.error } : { borderColor: colors.icon + '20' },
               round && Styles.round30,
               {
                  backgroundColor: bg == "transparent" ? "transparent" : colors.input,
               },
               { color: colors.text },
               multiline && { height: 150, textAlignVertical: 'top' }
            ]}
            onChangeText={onChange}
            placeholderTextColor={colors.dimmed}
            multiline={multiline}
            numberOfLines={multiline ? 5 : undefined}
         />
         {error && (<Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>{errorText}</Text>)}
         {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, { color: colors.icon }]}>{info}</Text>)}
      </View>
   )
}