import React from "react";
import { View, Text, TextInput, StyleSheet, ViewStyle, StyleProp, KeyboardTypeOptions, TextInputProps } from "react-native";
interface PhoneInputProps {
	value: string | undefined;
	onChangeText: (text: string) => void;
	placeholder: string;
	extendedStyle?: StyleProp<ViewStyle>;
	editable?: boolean;
    textContentType?: TextInputProps['textContentType']; 
    autoComplete?: TextInputProps['autoComplete']
    keyboardType?: KeyboardTypeOptions
    autoCapitalize?: TextInputProps['autoCapitalize']
}

const PhoneInput: React.FC<PhoneInputProps> = ({ value, onChangeText, placeholder, extendedStyle, editable, keyboardType, textContentType, autoComplete, autoCapitalize }) => {
	return (
		<View>
			<View style={[styles.inputContainer, extendedStyle]}>
				<Text style={styles.prefix}>+852</Text>
				<View style={styles.horizontalLine} />
				<TextInput
					value={value}
					onChangeText={onChangeText}
					keyboardType={keyboardType}
					placeholder={placeholder}
					style={[styles.input, {fontFamily: 'Roboto-Regular'}]}
					placeholderTextColor="#888888"
					editable={editable}       
                    textContentType={textContentType}
                    autoComplete={autoComplete}
                    autoCapitalize={autoCapitalize}
             
				/>
			</View>
		</View>
	);
};

const styles = StyleSheet.create({
    inputContainer: {
        maxWidth: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 1,
        borderColor: '#bbbbbb',
        borderRadius: 12,
        padding: 20
    },
    prefix: {
        marginRight: 5,
        fontSize: 16
    },
    horizontalLine: {
        width: 24,
        borderColor: '#bbbbbb',
        borderWidth: 0.5,
        transform: [{ rotate: '90deg' }]
    },
    input: {
        flex: 1,
        marginLeft: 5,
        fontSize: 16,
        paddingVertical: 0
    },
    errorMessage: {
        fontSize: 14,
        color: '#ff0033',
        fontWeight: '400',
        marginLeft: 10,
        marginTop: 10
    }
});
export default PhoneInput;