import { StyleSheet, Text, TextInput as RNTextInput, View } from 'react-native';
import { inputs, wrappers, descriptions } from './styles';
import { variants, innerBorders } from '../common/styles';
import type { ITextInputProps } from './types';

export default function TextInput(props: ITextInputProps) {
  const {
    description,
    placeholder,
    size = 'medium',
    style,
    textStyle,
    variant = 'primary',
    ...rest
  } = props;
  return (
    <View
      style={StyleSheet.flatten([
        variants.basic,
        wrappers.basic,
        variants[variant],
        style,
      ])}
    >
      <View style={StyleSheet.flatten([wrappers.innerBorders])}>
        <RNTextInput
          style={StyleSheet.flatten([
            innerBorders.basic,
            inputs.basic,
            innerBorders[variant],
            inputs[variant],
            inputs[size],
            style,
          ])}
          placeholder={placeholder}
          placeholderTextColor={`${inputs[variant].color}B3`}
          {...rest}
        />
      </View>
      {description ? (
        <Text
          style={StyleSheet.flatten([
            descriptions.basic,
            descriptions[variant],
            textStyle,
          ])}
        >
          {description}
        </Text>
      ) : null}
    </View>
  );
}