crazycharge-app/component/registrationMultiStepForm/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 useSignUpStore from '../../../../providers/signup_form_store';
import DropdownSelect from '../../../global/dropdown_select';

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

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

    const nameFieldPlaceholder = signUpFormData.name
        ? signUpFormData.name
        : '姓名';

    const genderDropdownOptions = [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' }
    ];
    return (
        <>
            <View style={styles.container}>
                <Text style={styles.text}>請填妥以下資料</Text>
                <View
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 10
                    }}
                >
                    <NormalInput
                        value={signUpFormData.name}
                        placeholder={nameFieldPlaceholder}
                        onChangeText={(text) => {
                            setSignUpFormData({
                                ...signUpFormData,
                                name: text
                            });
                        }}
                    />

                    <NormalInput
                        placeholder="帳戶密碼"
                        onChangeText={(text) => {
                            setSignUpFormData({
                                ...signUpFormData,
                                password: text
                            });
                        }}
                        secureTextEntry={true}
                    />

                    <View
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: 10
                        }}
                    >
                        <DropdownSelect
                            onSelect={(value) => {
                                setSignUpFormData({
                                    ...signUpFormData,
                                    gender: value
                                });
                            }}
                            dropdownOptions={genderDropdownOptions}
                            placeholder={'性別'}
                        />

                        <DateModal
                            placeholder={
                                signUpFormData.birthDate
                                    ? signUpFormData.birthDate
                                    : 'DD/MM/YY'
                            }
                            onDateChange={(date) => {
                                setSignUpFormData({
                                    ...signUpFormData,
                                    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;