import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import { CustomInputProps } from './customInput.props';
import { getStyles } from './customInput.styles';
import { useAppTheme } from '@theme';

export const CustomInput: React.FC<CustomInputProps> = ({
  label,
  isPassword = false,
  rightActionText,
  onRightActionPress,
  error,
  secureTextEntry,
  style,
  ...rest
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const [isSecure, setIsSecure] = useState(isPassword);

  return (
    <View style={styles.container}>
      {label && (
        <View style={styles.labelRow}>
          <Text style={styles.label}>{label}</Text>
        </View>
      )}
      <View style={[styles.inputContainer, error ? { borderColor: colors.error } : null, style]}>
        <TextInput
          style={styles.input}
          placeholderTextColor={colors.placeholder}
          secureTextEntry={isPassword ? isSecure : secureTextEntry}
          autoCapitalize="none"
          autoCorrect={false}
          {...rest}
        />
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
          {isPassword && (
            <TouchableOpacity onPress={() => setIsSecure(!isSecure)} activeOpacity={0.7}>
              <Text style={styles.rightAction}>{isSecure ? 'Show' : 'Hide'}</Text>
            </TouchableOpacity>
          )}
          {rightActionText && onRightActionPress && (
            <TouchableOpacity onPress={onRightActionPress} activeOpacity={0.7}>
              <Text style={styles.rightAction}>{rightActionText}</Text>
            </TouchableOpacity>
          )}
        </View>
      </View>
      {error && <Text style={styles.errorText}>{error}</Text>}
    </View>
  );
};
