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,
  leftElement,
  ...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,
        ]}
      >
        {leftElement && (
          <View style={styles.leftElementWrap}>{leftElement}</View>
        )}
        <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>
  );
};