import React, {ReactNode, forwardRef} from 'react';
import {
  StyleProp,
  TextInput,
  TextInputProps,
  TextStyle,
  View,
  ViewStyle,
} from 'react-native';
import Text from '@components/Text';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

export interface InputProps extends TextInputProps {
  inputContainerStyle?: StyleProp<ViewStyle>;
  inputStyle?: StyleProp<TextStyle>;
  labelStyle?: StyleProp<TextStyle>;
  containerStyle?: StyleProp<ViewStyle>;
  errorMessage?: string;
  errorStyle?: StyleProp<TextStyle>;
  rightIcon?: ReactNode;
  leftIcon?: ReactNode;
  label?: string | ReactNode;
  withErrorMessage?: boolean;
}

/**
 * @deprecated Use `_HuGo/Input` instead
 */
const Input = forwardRef<TextInput, InputProps>(
  (
    {
      inputContainerStyle,
      inputStyle,
      containerStyle,
      errorMessage,
      errorStyle,
      rightIcon,
      leftIcon,
      label,
      labelStyle,
      withErrorMessage = true,
      ...props
    },
    ref,
  ) => {
    return (
      <View style={[styles.container, containerStyle]}>
        {label && <Text style={labelStyle}>{label}</Text>}
        <View style={[styles.inputContainer, inputContainerStyle]}>
          {leftIcon}
          <TextInput
            ref={ref}
            style={[styles.inputStyle, inputStyle]}
            {...props}
          />
          {rightIcon}
        </View>
        {withErrorMessage && (
          <Text color={COLORS.RED} style={[styles.errorStyle, errorStyle]}>
            {errorMessage}
          </Text>
        )}
      </View>
    );
  },
);

export default Input;