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 {
    SignUpFormData,
    HandleSignUpFormDataChange
} from '../../../../types/signup';
import DropdownSelect from '../../../global/dropdown_select';

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

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();
        }
    };

    const dropdownOptions = [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
        { label: 'Test Item 3', value: '3' },
        { label: 'Test Item 4', value: '4' },
        { label: 'Test Item 5', value: '5' },
        { label: 'Test Item 6', value: '6' },
        { label: 'Test Item 7', value: '7' },
        { label: 'Test Item 8', value: '8' }
    ];

    return (
        <>
            <View style={styles.container}>
                <Text style={styles.text}>請填妥以下資料</Text>
                <View
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 10
                    }}
                >
                    <NormalInput
                        placeholder="姓名"
                        onChangeText={(text) =>
                            handleFormDataChange('name', text)
                        }
                    />
                    <NormalInput
                        placeholder="帳戶密碼"
                        onChangeText={(text) =>
                            handleFormDataChange('password', text)
                        }
                        secureTextEntry={true}
                    />
                    <View
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: 10
                        }}
                    >
                        <DropdownSelect
                            onSelect={(value) =>
                                handleFormDataChange('gender', value)
                            }
                            dropdownOptions={dropdownOptions}
                            placeholder={'性別'}
                        />
                        <DateModal
                            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;