crazycharge-app/component/registrationMultiStepForm/formComponent/formPages/uberDriver.tsx

import { View, Text, StyleSheet } from "react-native";
import { SignUpFormData, HandleSignUpFormDataChange } from "../../../../types/signup";
import NormalButton from "../../../global/normal_button";
import { useState } from "react";
import SingleSelectButtonGroup from "../../../global/select_button";
import useSignUpStore from "../../../../providers/signup_form_store";

type UberDriverProps = {
	goToNextPage: () => void;
	handleFormDataChange: HandleSignUpFormDataChange;
	formData: SignUpFormData;
};

const UberDriver: React.FC<UberDriverProps> = ({ formData, goToNextPage, handleFormDataChange }) => {
	const { signUpFormData, setSignUpFormData } = useSignUpStore();

	const [error, setError] = useState("");
	const handleNext = () => {
		if (signUpFormData.isUberDriver == undefined) {
			setError("請確保所有資料都已填寫。");
		} else {
			setError("");
			goToNextPage();
		}
	};
	const handleSelectedChange = (selectedLabel: string) => {
		handleFormDataChange("isUberDriver", selectedLabel === "是（可享有獨家優惠)" ? true : false);
		setError("");
	};

	const selectLabelShown = () => {
		if (signUpFormData.isUberDriver == undefined) {
			return null;
		} else if (signUpFormData.isUberDriver == true) {
			return "是（可享有獨家優惠)";
		} else {
			return "否";
		}
	};

	const options = [{ label: "是（可享有獨家優惠)" }, { label: "否" }];
	return (
		<>
			<View style={styles.container}>
				<Text style={styles.text}>請問您是Uber Driver嗎?</Text>
				<SingleSelectButtonGroup
					options={options}
					// onSelectionChange={handleSelectedChange}
					onSelectionChange={(label) => {
						const convertLabelToBoolean =
							label === "是（可享有獨家優惠)" ? true : label === "否" ? false : undefined;
						setSignUpFormData({ ...signUpFormData, isUberDriver: convertLabelToBoolean });
					}}
					shouldShowRedOutline={error ? true : false}
					selectedOption={selectLabelShown()}
				/>
				<NormalButton
					title={<Text style={{ color: "#fff" }}>下一步</Text>}
					onPress={handleNext}
					extendedStyle={{}}
				/>
				{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 UberDriver;