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

import { View, Text, StyleSheet, Pressable, TextInput } 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;
    goToChooseCarPage: () => void;
};

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

    // const vehicleTypeFieldPlaceholder = signUpFormData.selectedCarBrand
    //     ? signUpFormData.selectedCarBrand
    //     : '車輛品牌';
    // const vehicleModelFieldPlaceholder = signUpFormData.selectedCarSeries
    //     ? signUpFormData.selectedCarSeries
    //     : '車輛型號';
    // const licensePlateFieldPlaceholder = signUpFormData.selectedCarModel
    //     ? signUpFormData.selectedCarModel
    //     : '車輛號碼';

    return (
        <>
            <View style={styles.container}>
                <Text style={styles.text}>您的車輛</Text>
                <View
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 10
                    }}
                >
                    <Pressable
                        style={styles.button}
                        onPress={goToChooseCarPage}
                    >
                        <TextInput
                            style={styles.fakeTextInput}
                            placeholder="車輛品牌"
                            editable={false}
                            pointerEvents="none"
                        ></TextInput>
                        <TextInput
                            style={styles.fakeTextInput}
                            placeholder="車輛型號"
                            editable={false}
                            pointerEvents="none"
                        ></TextInput>
                        <TextInput
                            style={styles.fakeTextInput}
                            placeholder="車輛號碼"
                            editable={false}
                            pointerEvents="none"
                        ></TextInput>
                    </Pressable>
                    <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
    },
    button: { flex: 1, gap: 10, marginTop: 5 },
    fakeTextInput: {
        maxWidth: '100%',
        fontSize: 16,
        borderWidth: 1,
        padding: 20,
        borderRadius: 12,
        borderColor: '#bbbbbb'
    },
    text: {
        fontSize: 20,
        paddingBottom: 10
    },
    errorMessage: {
        fontSize: 14,
        color: '#ff0033',
        fontWeight: '400',
        marginLeft: 10,
        marginTop: 10
    }
});
export default CarInformation;