import { View, Text, StyleSheet } from 'react-native';
import NormalButton from '../../../global/normal_button';
import { useState } from 'react';
import SingleSelectButtonGroup from '../../../global/select_button';
import useSignUpStore from '../../../../providers/signup_form_store';

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

const UberDriver: React.FC<UberDriverProps> = ({ goToNextPage }) => {
    const { signUpFormData, setSignUpFormData } = useSignUpStore();
    const [error, setError] = useState('');
    const options = [{ label: '是（可享有獨家優惠)' }, { label: '否' }];

    const handleNext = () => {
        if (signUpFormData.isUberDriver == undefined) {
            setError('請確保所有資料都已填寫。');
        } else {
            setError('');
            goToNextPage();
        }
    };
    const selectLabelShown = () => {
        if (signUpFormData.isUberDriver == undefined) {
            return null;
        } else if (signUpFormData.isUberDriver == true) {
            return '是（可享有獨家優惠)';
        } else {
            return '否';
        }
    };
    return (
        <View className="flex-1 items-center justify-center">
            <Text>***********PLACEHOLDER***********</Text>
            <Text>***********PLACEHOLDER***********</Text>
            <Text>***********PLACEHOLDER***********</Text>
            <Text>***********PLACEHOLDER***********</Text>
            <Text>***********PLACEHOLDER***********</Text>
            <Text>***********PLACEHOLDER***********</Text>
            <Text>***********PLACEHOLDER***********</Text>
            <Text>***********PLACEHOLDER***********</Text>
            <Text>***********PLACEHOLDER***********</Text>
            <Text>***********PLACEHOLDER***********</Text>
            <Text>***********PLACEHOLDER***********</Text>
            <Text>***********PLACEHOLDER***********</Text>
            <Text>***********PLACEHOLDER***********</Text>
            <NormalButton
                title={<Text style={{ color: '#fff' }}>下一步</Text>}
                onPress={goToNextPage}
                extendedStyle={{}}
            />
        </View>
        // <>
        // 	<View style={styles.container}>
        // 		<Text style={styles.text}>請問您是Uber Driver嗎?</Text>
        // 		<SingleSelectButtonGroup
        // 			options={options}
        // 			onSelectionChange={(label) => {
        // 				const convertLabelToBoolean =
        // 					label === "是（可享有獨家優惠)" ? true : label === "否" ? false : undefined;
        // 				setSignUpFormData({ ...signUpFormData, isUberDriver: convertLabelToBoolean });
        // 			}}
        // 			shouldShowRedOutline={error ? true : false}
        // 			selectedOption={selectLabelShown()}
        // 		/>
        // 		<NormalButton
        // 			title={<Text style={{ color: "#fff" }}>下一步</Text>}
        // 			onPress={handleNext}
        // 			extendedStyle={{}}
        // 		/>
        // 		{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 UberDriver;