import React from 'react';
import { StyleSheet, TextInput, TextInputProps, DimensionValue } from 'react-native';
import ThemedView from '@/components/theme/default/ThemedView';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

const DEFAULT_WIDTH = 320;
const DEFAULT_HEIGHT = 50;

type ThemedTextInputProps = TextInputProps & {
  width?: DimensionValue;
  height?: DimensionValue;
  fontSize?: number;
  containerStyle?: object;
};

const ThemedTextInput: React.FC<ThemedTextInputProps> = ({
  width = DEFAULT_WIDTH,
  height = DEFAULT_HEIGHT,
  fontSize = 16,
  containerStyle,
  style,
  ...restProps
}) => {
  const scheme = useColorScheme() ?? 'dark';

  return (
    <ThemedView style={[
      styles.inputContainer,
      {
        width,
        height,
        borderColor: Colors[scheme].subtle },
        containerStyle,
    ]}>
      <TextInput
        style={[
          styles.input,
          {
            color: Colors[scheme].text,
            backgroundColor: Colors[scheme].background,
            fontSize,
          },
          style,
        ]}
        placeholderTextColor={Colors[scheme].text + '80'} // 50% opacity
        {...restProps}
      />
    </ThemedView>
  );
};

export default ThemedTextInput;

const styles = StyleSheet.create({
  inputContainer: {
    padding: 3,
    borderRadius: 10,
    borderWidth: 1,
  },
  input: {
    width: '100%',
    height: '100%',
    borderRadius: 8,
    paddingHorizontal: 15,
  },
});
