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

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;