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';

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

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

  return (
    <ThemedView
      style={[
        styles.inputContainer,
        {
          borderColor: Colors[scheme].accent,
          width,
          height,
        },
        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%',
    paddingHorizontal: 15,
  },
});