import { View, Text, StyleSheet } from "react-native";
import NormalInput from "../../../global/normal_input";
import NormalButton from "../../../global/normal_button";
import { useState } from "react";
import useSignUpStore from "../../../../providers/signup_form_store";

type CarInformationProps = {
	goToNextPage: () => void;
};

const CarInformation: React.FC<CarInformationProps> = ({ goToNextPage }) => {
	const { signUpFormData, setSignUpFormData } = useSignUpStore();
	const [error, setError] = useState("");
	const handleNext = () => {
		if (
			signUpFormData.vehicleModel === "" ||
			signUpFormData.vehicleModel === "" ||
			signUpFormData.licensePlate === ""
		) {
			setError("請確保所有資料都已填寫。");
		} else {
			setError("");
			goToNextPage();
		}
	};

	const vehicleTypeFieldPlaceholder = signUpFormData.vehicleType ? signUpFormData.vehicleType : "車輛品牌";
	const vehicleModelFieldPlaceholder = signUpFormData.vehicleModel ? signUpFormData.vehicleModel : "車輛型號";
	const licensePlateFieldPlaceholder = signUpFormData.licensePlate ? signUpFormData.licensePlate : "車輛號碼";

	return (
		<>
			<View style={styles.container}>
				<Text style={styles.text}>您的車輛</Text>
				<View
					style={{
						display: "flex",
						flexDirection: "column",
						gap: 10,
					}}
				>
					<NormalInput
						value={signUpFormData.vehicleType}
						placeholder={vehicleTypeFieldPlaceholder}
						onChangeText={(vehicleType) => {
							setSignUpFormData({ ...signUpFormData, vehicleType: vehicleType });
						}}
					/>
					<NormalInput
						value={signUpFormData.vehicleModel}
						placeholder={vehicleModelFieldPlaceholder}
						onChangeText={(vehicleModel) => {
							setSignUpFormData({ ...signUpFormData, vehicleModel: vehicleModel });
						}}
					/>
					<NormalInput
						value={signUpFormData.licensePlate}
						placeholder={licensePlateFieldPlaceholder}
						onChangeText={(licensePlate) => {
							setSignUpFormData({ ...signUpFormData, licensePlate: licensePlate });
						}}
					/>
					<NormalButton
						title={<Text style={{ color: "#fff" }}>下一步</Text>}
						onPress={handleNext}
						extendedStyle={{}}
					/>
					{error && <Text style={styles.errorMessage}>{error}</Text>}
					<NormalButton
						title={<Text style={{ color: "#888888" }}>略過</Text>}
						onPress={goToNextPage}
						extendedStyle={{ backgroundColor: "transparent" }}
					/>
				</View>
			</View>
		</>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		marginHorizontal: 20,
	},
	text: {
		fontSize: 20,
		paddingBottom: 10,
	},
	errorMessage: {
		fontSize: 14,
		color: "#ff0033",
		fontWeight: "400",
		marginLeft: 10,
		marginTop: 10,
	},
});
export default CarInformation;