470 lines
13 KiB
JavaScript
470 lines
13 KiB
JavaScript
import React, { useState, useRef } from 'react';
|
||
import {
|
||
View,
|
||
Text,
|
||
Modal,
|
||
StyleSheet,
|
||
SafeAreaView,
|
||
TouchableOpacity,
|
||
Alert,
|
||
ActivityIndicator,
|
||
ScrollView,
|
||
TouchableWithoutFeedback,
|
||
Keyboard,
|
||
} from 'react-native';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import Input from './Input';
|
||
import Button from './Button';
|
||
import { COLORS } from '../constants/colors';
|
||
|
||
const PASSPORT_SERIES = [
|
||
'I-AS', 'I-MR', 'II-MR', 'I-AH', 'II-AH',
|
||
'I-LB', 'II-LB', 'I-BN', 'II-BN', 'I-DZ', 'II-DZ'
|
||
];
|
||
|
||
const EditProfileModal = ({
|
||
visible,
|
||
onClose,
|
||
onSave,
|
||
initialData = {},
|
||
isLoading = false
|
||
}) => {
|
||
const [formData, setFormData] = useState({
|
||
name: initialData.name || '',
|
||
phone: initialData.phone ? initialData.phone.toString() : '',
|
||
password: '',
|
||
passport_serie: initialData.passport_serie || '',
|
||
passport_id: initialData.passport_id ? initialData.passport_id.toString() : '',
|
||
});
|
||
|
||
const [errors, setErrors] = useState({});
|
||
const [showPassportPicker, setShowPassportPicker] = useState(false);
|
||
|
||
const phoneInputRef = useRef(null);
|
||
const passwordInputRef = useRef(null);
|
||
const passportIdInputRef = useRef(null);
|
||
|
||
const validateForm = () => {
|
||
const newErrors = {};
|
||
|
||
// Name validation (required, max 255 characters)
|
||
if (!formData.name.trim()) {
|
||
newErrors.name = 'At gerek';
|
||
} else if (formData.name.length > 255) {
|
||
newErrors.name = 'At 255 harpdan köp bolmaly däl';
|
||
}
|
||
|
||
// Phone validation (required, should be number)
|
||
if (!formData.phone.trim()) {
|
||
newErrors.phone = 'Telefon belgisi gerek';
|
||
} else if (!/^\d+$/.test(formData.phone)) {
|
||
newErrors.phone = 'Telefon belgisi diňe sanlardan durmalı';
|
||
} else if (formData.phone.length < 8) {
|
||
newErrors.phone = 'Telefon belgisi azyndan 8 san bolmaly';
|
||
}
|
||
|
||
// Password validation (optional, but if provided should be strong)
|
||
if (formData.password && formData.password.length < 6) {
|
||
newErrors.password = 'Parol azyndan 6 harp bolmaly';
|
||
}
|
||
|
||
// Passport ID validation (optional, but if provided should be number)
|
||
if (formData.passport_id && !/^\d+$/.test(formData.passport_id.trim())) {
|
||
newErrors.passport_id = 'Passport ID diňe sanlardan durmalı';
|
||
}
|
||
|
||
setErrors(newErrors);
|
||
return Object.keys(newErrors).length === 0;
|
||
};
|
||
|
||
const handleSave = () => {
|
||
if (!validateForm()) {
|
||
return;
|
||
}
|
||
|
||
// Prepare data for API call
|
||
const updateData = {
|
||
name: formData.name.trim(),
|
||
phone: parseInt(formData.phone),
|
||
};
|
||
|
||
// Only include optional fields if they're provided
|
||
if (formData.password) {
|
||
updateData.password = formData.password;
|
||
}
|
||
|
||
if (formData.passport_serie) {
|
||
updateData.passport_serie = formData.passport_serie;
|
||
}
|
||
|
||
if (formData.passport_id) {
|
||
updateData.passport_id = formData.passport_id.trim();
|
||
}
|
||
|
||
onSave(updateData);
|
||
};
|
||
|
||
const handleClose = () => {
|
||
// Reset form data and errors
|
||
setFormData({
|
||
name: initialData.name || '',
|
||
phone: initialData.phone ? initialData.phone.toString() : '',
|
||
password: '',
|
||
passport_serie: initialData.passport_serie || '',
|
||
passport_id: initialData.passport_id ? initialData.passport_id.toString() : '',
|
||
});
|
||
setErrors({});
|
||
onClose();
|
||
};
|
||
|
||
const updateFormData = (field, value) => {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
[field]: value
|
||
}));
|
||
|
||
// Clear error for this field if it exists
|
||
if (errors[field]) {
|
||
setErrors(prev => ({
|
||
...prev,
|
||
[field]: null
|
||
}));
|
||
}
|
||
};
|
||
|
||
const renderPassportSeriesPicker = () => {
|
||
if (!showPassportPicker) return null;
|
||
|
||
return (
|
||
<Modal
|
||
visible={showPassportPicker}
|
||
transparent={true}
|
||
animationType="slide"
|
||
onRequestClose={() => setShowPassportPicker(false)}
|
||
>
|
||
<TouchableWithoutFeedback onPress={() => setShowPassportPicker(false)}>
|
||
<View style={styles.modalOverlay}>
|
||
<View style={styles.pickerContainer}>
|
||
<View style={styles.pickerHeader}>
|
||
<Text style={styles.pickerTitle}>Passport seriýasy</Text>
|
||
<TouchableOpacity onPress={() => setShowPassportPicker(false)}>
|
||
<Text style={styles.pickerDoneText}>Boldy</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
<ScrollView style={styles.pickerList}>
|
||
<TouchableOpacity
|
||
style={styles.pickerItem}
|
||
onPress={() => {
|
||
updateFormData('passport_serie', '');
|
||
setShowPassportPicker(false);
|
||
}}
|
||
>
|
||
<Text style={[styles.pickerItemText, styles.placeholderText]}>
|
||
Saýlaň
|
||
</Text>
|
||
</TouchableOpacity>
|
||
{PASSPORT_SERIES.map((series) => (
|
||
<TouchableOpacity
|
||
key={series}
|
||
style={[
|
||
styles.pickerItem,
|
||
formData.passport_serie === series && styles.selectedPickerItem
|
||
]}
|
||
onPress={() => {
|
||
updateFormData('passport_serie', series);
|
||
setShowPassportPicker(false);
|
||
}}
|
||
>
|
||
<Text style={[
|
||
styles.pickerItemText,
|
||
formData.passport_serie === series && styles.selectedPickerItemText
|
||
]}>
|
||
{series}
|
||
</Text>
|
||
</TouchableOpacity>
|
||
))}
|
||
</ScrollView>
|
||
</View>
|
||
</View>
|
||
</TouchableWithoutFeedback>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<Modal
|
||
visible={visible}
|
||
animationType="slide"
|
||
presentationStyle="pageSheet"
|
||
onRequestClose={handleClose}
|
||
>
|
||
<SafeAreaView style={styles.container}>
|
||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||
<View style={styles.content}>
|
||
{/* Header */}
|
||
<View style={styles.header}>
|
||
<TouchableOpacity onPress={handleClose} style={styles.closeButton}>
|
||
<Ionicons name="close" size={24} color={COLORS.text} />
|
||
</TouchableOpacity>
|
||
<Text style={styles.title}>Şahsy maglumatlar</Text>
|
||
<View style={styles.placeholder} />
|
||
</View>
|
||
|
||
{/* Form */}
|
||
<ScrollView style={styles.form} showsVerticalScrollIndicator={false}>
|
||
<View style={styles.formSection}>
|
||
<Text style={styles.sectionTitle}>Esasy maglumatlar</Text>
|
||
|
||
<Input
|
||
label="Ady *"
|
||
value={formData.name}
|
||
onChangeText={(value) => updateFormData('name', value)}
|
||
error={errors.name}
|
||
maxLength={255}
|
||
returnKeyType="next"
|
||
onSubmitEditing={() => phoneInputRef.current?.focus()}
|
||
/>
|
||
|
||
<Input
|
||
ref={phoneInputRef}
|
||
label="Telefon belgisi *"
|
||
value={formData.phone}
|
||
onChangeText={(value) => updateFormData('phone', value)}
|
||
error={errors.phone}
|
||
keyboardType="numeric"
|
||
maxLength={8}
|
||
returnKeyType="next"
|
||
onSubmitEditing={() => passwordInputRef.current?.focus()}
|
||
/>
|
||
|
||
<Input
|
||
ref={passwordInputRef}
|
||
label="Täze parol"
|
||
value={formData.password}
|
||
onChangeText={(value) => updateFormData('password', value)}
|
||
error={errors.password}
|
||
secureTextEntry
|
||
placeholder="Parol üýtgetmezlik üçin boş goýuň"
|
||
returnKeyType="next"
|
||
onSubmitEditing={() => passportIdInputRef.current?.focus()}
|
||
/>
|
||
</View>
|
||
|
||
<View style={styles.formSection}>
|
||
<Text style={styles.sectionTitle}>Passport maglumatlary</Text>
|
||
|
||
<View style={styles.inputContainer}>
|
||
<Text style={styles.label}>Passport seriýasy</Text>
|
||
<TouchableOpacity
|
||
style={[styles.pickerButton, errors.passport_serie && styles.inputError]}
|
||
onPress={() => setShowPassportPicker(true)}
|
||
>
|
||
<Text style={[styles.pickerButtonText, !formData.passport_serie && styles.placeholderText]}>
|
||
{formData.passport_serie || 'Saýlaň'}
|
||
</Text>
|
||
<Ionicons name="chevron-down" size={20} color={COLORS.textSecondary} />
|
||
</TouchableOpacity>
|
||
{errors.passport_serie && (
|
||
<Text style={styles.errorText}>{errors.passport_serie}</Text>
|
||
)}
|
||
</View>
|
||
|
||
<Input
|
||
ref={passportIdInputRef}
|
||
label="Passport ID"
|
||
value={formData.passport_id}
|
||
onChangeText={(value) => updateFormData('passport_id', value)}
|
||
error={errors.passport_id}
|
||
keyboardType="numeric"
|
||
returnKeyType="done"
|
||
/>
|
||
</View>
|
||
|
||
<View style={styles.note}>
|
||
<Ionicons name="information-circle" size={16} color={COLORS.textSecondary} />
|
||
<Text style={styles.noteText}>
|
||
* belgisi bolan meýdanlar hökmany doldurulmaly
|
||
</Text>
|
||
</View>
|
||
</ScrollView>
|
||
|
||
{/* Save Button */}
|
||
<View style={styles.footer}>
|
||
<Button
|
||
title="Ýatda sakla"
|
||
onPress={handleSave}
|
||
disabled={isLoading}
|
||
style={styles.saveButton}
|
||
/>
|
||
{isLoading && (
|
||
<ActivityIndicator
|
||
size="small"
|
||
color={COLORS.primary}
|
||
style={styles.loader}
|
||
/>
|
||
)}
|
||
</View>
|
||
</View>
|
||
</TouchableWithoutFeedback>
|
||
|
||
{renderPassportSeriesPicker()}
|
||
</SafeAreaView>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: COLORS.background,
|
||
},
|
||
content: {
|
||
flex: 1,
|
||
},
|
||
header: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
paddingHorizontal: 20,
|
||
paddingVertical: 16,
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: COLORS.border,
|
||
},
|
||
closeButton: {
|
||
padding: 4,
|
||
},
|
||
title: {
|
||
fontSize: 18,
|
||
fontWeight: 'bold',
|
||
color: COLORS.text,
|
||
},
|
||
placeholder: {
|
||
width: 32,
|
||
},
|
||
form: {
|
||
flex: 1,
|
||
paddingHorizontal: 20,
|
||
},
|
||
formSection: {
|
||
marginTop: 24,
|
||
},
|
||
sectionTitle: {
|
||
fontSize: 16,
|
||
fontWeight: '600',
|
||
color: COLORS.text,
|
||
marginBottom: 16,
|
||
},
|
||
inputContainer: {
|
||
marginBottom: 16,
|
||
},
|
||
label: {
|
||
fontSize: 16,
|
||
fontWeight: '500',
|
||
color: COLORS.text,
|
||
marginBottom: 8,
|
||
},
|
||
pickerButton: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 12,
|
||
borderWidth: 1,
|
||
borderColor: COLORS.border,
|
||
borderRadius: 8,
|
||
backgroundColor: COLORS.surface,
|
||
},
|
||
pickerButtonText: {
|
||
fontSize: 16,
|
||
color: COLORS.text,
|
||
},
|
||
placeholderText: {
|
||
color: COLORS.textSecondary,
|
||
},
|
||
inputError: {
|
||
borderColor: COLORS.error,
|
||
},
|
||
errorText: {
|
||
fontSize: 14,
|
||
color: COLORS.error,
|
||
marginTop: 4,
|
||
},
|
||
note: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginTop: 16,
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 12,
|
||
backgroundColor: COLORS.surface,
|
||
borderRadius: 8,
|
||
},
|
||
noteText: {
|
||
fontSize: 14,
|
||
color: COLORS.textSecondary,
|
||
marginLeft: 8,
|
||
flex: 1,
|
||
},
|
||
footer: {
|
||
padding: 20,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
saveButton: {
|
||
flex: 1,
|
||
},
|
||
loader: {
|
||
marginLeft: 12,
|
||
},
|
||
modalOverlay: {
|
||
flex: 1,
|
||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||
justifyContent: 'flex-end',
|
||
},
|
||
pickerContainer: {
|
||
backgroundColor: COLORS.surface,
|
||
borderTopLeftRadius: 12,
|
||
borderTopRightRadius: 12,
|
||
maxHeight: 400,
|
||
},
|
||
pickerHeader: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
paddingHorizontal: 20,
|
||
paddingVertical: 16,
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: COLORS.border,
|
||
},
|
||
pickerTitle: {
|
||
fontSize: 16,
|
||
fontWeight: '600',
|
||
color: COLORS.text,
|
||
},
|
||
pickerDoneText: {
|
||
fontSize: 16,
|
||
color: COLORS.primary,
|
||
fontWeight: '600',
|
||
},
|
||
pickerList: {
|
||
maxHeight: 300,
|
||
},
|
||
pickerItem: {
|
||
paddingHorizontal: 20,
|
||
paddingVertical: 16,
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: COLORS.border,
|
||
},
|
||
selectedPickerItem: {
|
||
backgroundColor: COLORS.primary + '10',
|
||
},
|
||
pickerItemText: {
|
||
fontSize: 16,
|
||
color: COLORS.text,
|
||
},
|
||
selectedPickerItemText: {
|
||
color: COLORS.primary,
|
||
fontWeight: '600',
|
||
},
|
||
});
|
||
|
||
export default EditProfileModal;
|