import React from 'react';
import { View, Text, TextInput } from 'react-native';
import { useTheme } from '@theme';
import { getStyles } from './formInput.styles';
import { FormInputProps } from './formInput.props';

export const FormInput: React.FC<FormInputProps> = ({
  label,
  value,
  onChangeText,
  placeholder,
  required = false,
  multiline = false,
  keyboardType = 'default',
  leftIcon,
  rightIcon,
  prefix,
  prefixStyle,
  containerStyle,
  inputContainerStyle,
  inputStyle,
  ...rest
}) => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  return (
    <View style={[styles.container, containerStyle]}>
      {label ? (
        <Text style={styles.label}>
          {label}
          {required && <Text style={styles.required}>*</Text>}
        </Text>
      ) : null}
      <View style={[styles.inputWrapper, inputContainerStyle]}>
        {leftIcon ? <View style={styles.leftIconWrapper}>{leftIcon}</View> : null}
        {prefix ? (
          <Text style={[styles.prefix, prefixStyle]}>{prefix}</Text>
        ) : null}
        <TextInput
          style={[styles.input, multiline && styles.multilineInput, inputStyle]}
          value={value}
          onChangeText={onChangeText}
          placeholder={placeholder}
          placeholderTextColor={colors.textMuted}
          multiline={multiline}
          numberOfLines={multiline ? 4 : 1}
          keyboardType={keyboardType}
          {...rest}
        />
        {rightIcon ? <View style={styles.rightIconWrapper}>{rightIcon}</View> : null}
      </View>
    </View>
  );
};