import React, { useState } from "react";
import { View, Text, TextInput, StyleSheet, ViewStyle, StyleProp } from "react-native";
import { HandleFormDataChange } from "../type";
interface PhoneInputProps {
	placeholder: string;
	extendedStyle?: StyleProp<ViewStyle>;
	handleFormDataChange?: HandleFormDataChange;
	editable?: boolean;
}

const PhoneInput: React.FC<PhoneInputProps> = ({ placeholder, extendedStyle, handleFormDataChange, editable }) => {
	const [error, setError] = useState("");
	const handleTextChange = (text: string) => {
		if (text.length >= 8) {
			setError("");
			handleFormDataChange?.("phone", text);
			handleFormDataChange?.("phoneVerificationStatus", true);
		} else {
			setError("Please enter at least 8 digits");
			handleFormDataChange?.("phone", text);
			handleFormDataChange?.("phoneVerificationStatus", false);
		}
	};

	return (
		<View>
			<View style={[styles.inputContainer, extendedStyle]}>
				<Text style={styles.prefix}>+852</Text>
				<View style={styles.horizontalLine} />
				<TextInput
					keyboardType="numeric"
					onChangeText={handleTextChange}
					placeholder={placeholder}
					style={[styles.input]}
					placeholderTextColor="#888888"
					editable={editable}
				/>
			</View>
			{error && <Text style={styles.errorMessage}>{error}</Text>}
		</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,
	},
	errorMessage: {
		fontSize: 14,
		color: "#ff0033",
		fontWeight: "400",
		marginLeft: 10,
		marginTop: 10,
	},
});
export default PhoneInput;