crazycharge-app/component/multiStepForm/formComponent/formPages/basicInformation.tsx

import { View, Text, StyleSheet } from "react-native";
import NormalInput from "../../../global/normal_input";
import { useState } from "react";
import DateModal from "../../../global/date_input";
import NormalButton from "../../../global/normal_button";
import { FormData, HandleFormDataChange } from "../../../type";

type basicInformationProps = {
	goToNextPage: () => void;
	handleFormDataChange: HandleFormDataChange;
	formData: FormData;
};

const BasicInformation: React.FC<basicInformationProps> = ({ handleFormDataChange, goToNextPage, formData }) => {
	const [error, setError] = useState("");
	const handleNext = () => {
		if (formData.name === "" || formData.password === "" || formData.birthDate === "") {
			setError("請確保所有資料都已填寫。");
		} else {
			setError("");
			goToNextPage();
		}
	};

	return (
		<>
			<View style={styles.container}>
				<Text style={styles.text}>請填妥以下資料</Text>
				<View
					style={{
						display: "flex",
						flexDirection: "column",
						gap: 10,
					}}
				>
					<NormalInput
						placeholder={formData.name ? formData.name : "姓名"}
						onChangeText={(text) => handleFormDataChange("name", text)}
					/>
					<NormalInput
						placeholder="帳戶密碼"
						onChangeText={(text) => handleFormDataChange("password", text)}
						secureTextEntry={true}
					/>

					<View style={{ display: "flex", flexDirection: "row", gap: 10 }}>
						{/* await YoYo's code review for gender */}
						<NormalInput
							placeholder="性別"
							onChangeText={(t) => console.log(t)}
							extendedStyle={{ width: "50%" }}
						/>
						<DateModal
							// placeholder="出生日期"
							placeholder={formData.birthDate ? formData.birthDate : "DD/MM/YY"}
							onDateChange={(date) => {
								handleFormDataChange("birthDate", date);
							}}
						/>
					</View>
					<NormalButton
						title={<Text style={{ color: "#fff" }}>下一步</Text>}
						onPress={handleNext}
						extendedStyle={{}}
					/>
				</View>
				{error && <Text style={styles.errorMessage}>{error}</Text>}
			</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 BasicInformation;