sg-delivery-customer/app/features/screens/completeProfileScreen/completeProfileScreen.tsx

import React, { useState } from 'react';
import {
  View,
  Text,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { getStyles } from './completeProfileScreen.styles';
import { CustomInput, PrimaryButton } from '@components';
import { useAppTheme } from '@theme';
import { AuthStackParamList } from '../../../navigation/authStack';
import { useAppDispatch } from '@store';
import { saveProfileData } from './reducer';
import { OnboardingStackParamList } from '@navigation/onboardingStack';

type NavProp = StackNavigationProp<
  OnboardingStackParamList,
  'CompleteProfileScreen'
>;

const LOCATION_LABELS = ['Home', 'Work', 'Other'];

export const CompleteProfileScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const navigation = useNavigation<NavProp>();
  const dispatch = useAppDispatch();

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [gender, setGender] = useState<'MALE' | 'FEMALE' | 'OTHER'>('MALE');

  const [addressLine1, setAddressLine1] = useState('');
  const [houseNumber, setHouseNumber] = useState('');
  const [landmark, setLandmark] = useState('');
  const [city, setCity] = useState('');
  const [state, setState] = useState('');
  const [postalCode, setPostalCode] = useState('');
  const [addressPhone, setAddressPhone] = useState('');

  const [selectedLabel, setSelectedLabel] = useState('Home');

  const handleSave = () => {
    dispatch(
      saveProfileData({
        name,
        email,
        gender,
        addressLine1,
        houseNumber,
        landmark,
        city,
        state,
        postalCode,
        addressPhone,
        addressLabel: selectedLabel,
      }),
    );
    navigation.navigate('PreferencesScreen');
  };

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView
        contentContainerStyle={styles.scrollContainer}
        showsVerticalScrollIndicator={false}
      >
        <Text style={styles.title}>Complete Profile</Text>
        <Text style={styles.subtitle}>Tell us about yourself</Text>

        <View style={styles.form}>
          {/* Personal Information */}

          <CustomInput
            label="Full Name"
            placeholder="John Doe"
            value={name}
            onChangeText={setName}
          />

          <CustomInput
            label="Email"
            placeholder="john@example.com"
            keyboardType="email-address"
            autoCapitalize="none"
            value={email}
            onChangeText={setEmail}
          />

          {/* Gender */}

          <Text style={styles.labelText}>Gender</Text>

          <View style={styles.labelRow}>
            {['MALE', 'FEMALE', 'OTHER'].map(item => (
              <TouchableOpacity
                key={item}
                style={[
                  styles.labelChip,
                  gender === item && styles.labelChipSelected,
                ]}
                onPress={() => setGender(item as 'MALE' | 'FEMALE' | 'OTHER')}
              >
                <Text
                  style={[
                    styles.labelChipText,
                    gender === item && styles.labelChipTextSelected,
                  ]}
                >
                  {item.charAt(0) + item.slice(1).toLowerCase()}
                </Text>
              </TouchableOpacity>
            ))}
          </View>

          {/* Address */}

          <CustomInput
            label="Address Line 1"
            placeholder="123 Main Street"
            value={addressLine1}
            onChangeText={setAddressLine1}
          />

          <CustomInput
            label="House / Flat Number"
            placeholder="Apt 4B"
            value={houseNumber}
            onChangeText={setHouseNumber}
          />

          <CustomInput
            label="Landmark"
            placeholder="Near Central Park"
            value={landmark}
            onChangeText={setLandmark}
          />

          <CustomInput
            label="City"
            placeholder="New York"
            value={city}
            onChangeText={setCity}
          />

          <CustomInput
            label="State"
            placeholder="NY"
            value={state}
            onChangeText={setState}
          />

          <CustomInput
            label="Postal Code"
            placeholder="10001"
            keyboardType="number-pad"
            value={postalCode}
            onChangeText={setPostalCode}
          />

          <CustomInput
            label="Phone Number"
            placeholder="+1 9999999999"
            keyboardType="phone-pad"
            value={addressPhone}
            onChangeText={setAddressPhone}
          />

          {/* Location Label */}

          <Text style={styles.labelText}>Location Label</Text>

          <View style={styles.labelRow}>
            {LOCATION_LABELS.map(label => (
              <TouchableOpacity
                key={label}
                style={[
                  styles.labelChip,
                  selectedLabel === label && styles.labelChipSelected,
                ]}
                onPress={() => setSelectedLabel(label)}
              >
                <Text
                  style={[
                    styles.labelChipText,
                    selectedLabel === label && styles.labelChipTextSelected,
                  ]}
                >
                  {label}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>

        <PrimaryButton
          title="Save & Continue"
          onPress={handleSave}
          disabled={!name || !email}
        />
      </ScrollView>
    </KeyboardAvoidingView>
  );
};