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';
import { useTranslation } from '../../../../util/hooks/useTranslation';

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

const BasicInformation: React.FC<basicInformationProps> = ({ goToNextPage }) => {
    const { signUpFormData, setSignUpFormData } = useSignUpStore();
    const [selectedYear, setSelectedYear] = useState('');
    const [selectedMonth, setSelectedMonth] = useState('');
    const [selectedDay, setSelectedDay] = useState('');
    const [birthDate, setBirthDate] = useState('');
    const [error, setError] = useState('');
    const { t, ready, currentLanguage } = useTranslation();
    
    const handleNext = () => {
        setSignUpFormData({
            ...signUpFormData,
            birthDate: birthDate
        });
        if (
            signUpFormData.nickName === '' ||
            signUpFormData.gender === '' ||
            signUpFormData.birthDateMonth === '' ||
            signUpFormData.birthDateDay === ''
        ) {
            setError(t("register.three.error1"));
        } else {
            setError('');
            goToNextPage();
        }
    };

    const nameFieldPlaceholder = signUpFormData.nickName ? signUpFormData.nickName : t("register.three.name");

    const birthMonthOptions = Array.from({ length: 12 }, (_, i) => {
        const month = i + 1;
        return { label: month.toString(), value: month.toString() };
    });

    const birthDayOptions = Array.from({ length: 31 }, (_, i) => {
        const day = i + 1;
        return { label: day.toString(), value: day.toString() };
    });

    const genderDropdownOptions = [
        { label: '男', value: 'man' },
        { label: '女', value: 'woman' }
    ];

    const handleSelect = (type: string, value: string) => {
        if (type === 'year') {
            setSelectedYear(value);
        } else if (type === 'month') {
            setSelectedMonth(value);
        } else if (type === 'day') {
            setSelectedDay(value);
        }

        if (selectedMonth && selectedDay) {
            const day = selectedDay.padStart(2, '0');
            const month = selectedMonth.padStart(2, '0');
            const date = `${day}/${month}/11`;
            setBirthDate(date);
        }
    };

    return (
        <>
            <View style={styles.container}>
                <Text style={styles.text}>{t("register.three.label")}</Text>
                <View
                    className=""
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 10
                    }}
                >
                    <NormalInput
                        value={signUpFormData.nickName}
                        placeholder={nameFieldPlaceholder}
                        onChangeText={(text) => {
                            setSignUpFormData({
                                ...signUpFormData,
                                nickName: text
                            });
                        }}
                    />

                    <View className="">
                        <DropdownSelect
                            onSelect={(value) => {
                                setSignUpFormData({
                                    ...signUpFormData,
                                    gender: value
                                });
                            }}
                            dropdownOptions={genderDropdownOptions}
                            placeholder={
                                signUpFormData.gender
                                    ? genderDropdownOptions.find((option) => option.value === signUpFormData.gender)
                                          ?.label || t("register.three.sex")
                                    : t("register.three.sex")
                            }
                            extendedStyle={{ paddingLeft: 10, paddingVertical: 18 }}
                        />
                    </View>
                    <View className="flex flex-row">
                        <DropdownSelect
                            onSelect={(value) => {
                                setSignUpFormData({
                                    ...signUpFormData,
                                    birthDateMonth: value.padStart(2, '0')
                                });
                            }}
                            dropdownOptions={birthMonthOptions}
                            placeholder={`${
                                signUpFormData.birthDateMonth
                                    ? parseInt(signUpFormData.birthDateMonth).toString()
                                    : t("register.three.mm")
                            }`}
                            extendedStyle={{ paddingLeft: 10, paddingVertical: 18, marginRight: 6 }}
                        />
                        <DropdownSelect
                            onSelect={(value) => {
                                setSignUpFormData({
                                    ...signUpFormData,
                                    birthDateDay: value.padStart(2, '0')
                                });
                            }}
                            dropdownOptions={birthDayOptions}
                            // placeholder={'日期'}
                            placeholder={`${
                                signUpFormData.birthDateDay
                                    ? parseInt(signUpFormData.birthDateDay).toString()
                                    : t("register.three.dd")
                            }`}
                            extendedStyle={{ paddingLeft: 10, paddingVertical: 18, marginLeft: 6 }}
                        />
                    </View>
                    <NormalButton
                        title={<Text style={{ color: '#fff' }}>{t("register.three.next")}</Text>}
                        onPress={handleNext}
                        extendedStyle={{}}
                    />
                    <View className="mb-4" />
                </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;