import {
View,
Text,
SafeAreaView,
ScrollView,
StyleSheet,
StatusBar,
Platform,
Dimensions,
Appearance,
KeyboardAvoidingView,
TextInput,
TouchableWithoutFeedback,
} from "react-native";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { publicApi, user, userAddress } from "../../redux/actions";
import onInput from "../../utils/onInput";
import { useNavigation } from "@react-navigation/native";
import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
//components
import Navbar from "../../components/Navbar";
import CustomPressable from "../../components/Pressable";
import CustomTextInput from "../../components/CustomTextInput";
import Select from "../../components/Select";
import MapSelector from "../../components/MapSelector";
//style
import tw from "tailwind-rn";
import Colors from "../../constants/Colors";
import fontSize from "../../constants/fontSize";
//variables
const ios = Platform.OS === "ios";
const { height } = Dimensions.get("window");
const Address = ({
user,
route,
city,
province,
getCity,
getProvince,
provinces,
cities,
createAddress,
profileFields,
setProfileFields,
setProfile,
loading,
setPhase,
cityLoading,
mobile,
theme,
}) => {
const [addressFields, setAddressFields] = useState({});
const [mapAddress, setMapAddress] = useState(null);
const colorScheme = Appearance.getColorScheme();
const navigation = useNavigation();
const profilePage = React.useMemo(() => {
return route.params?.type === "profile";
});
useEffect(() => {
getProvince();
setProfileFields({
file: user?.picFileId,
picFileId: user?.picFileId,
docFileIds: user?.docFileIds,
cellphone: user?.cellphone,
firstName: user?.firstName,
lastName: user?.lastName,
password: user?.password,
username: user?.username,
address: user?.address,
email: user?.email,
birthDate: user?.birthDate,
gender: user?.gender,
status: user?.status,
nationalId: user?.nationalId,
phone: user?.phone,
schools: user?.schools,
zoneId: user?.zoneId,
schoolId: user?.schoolId,
postalCode: user?.postalCode,
gradeIds: user?.gradeIds,
provinceId: user?.provinceId,
cityId: user?.cityId,
});
}, []);
useEffect(() => {
StatusBar.setBarStyle(
`${theme === "light" ? "dark" : "light"}-content`,
true
);
}, [theme]);
useEffect(() => {
if (addressFields?.provinceId) {
getCity({
provinceId: provinces.filter(
(province) => province.name === addressFields?.provinceId
)[0].id,
});
}
}, [addressFields]);
const onChange = (name, value) => {
setAddressFields({ ...addressFields, [name]: value });
};
const submit = () => {
const {
firstName,
lastName,
cellphone,
phone,
address,
provinceId,
cityId,
postalCode,
} = addressFields;
if (!firstName) {
return asyncAwesomeAlert("خطا", "نام خود را وارد کنید.", {
showCancelButton: false,
confirmText: "باشه",
});
}
if (!lastName) {
return asyncAwesomeAlert("خطا", "نام خانوادگی خود را وارد کنید", {
showCancelButton: false,
confirmText: "باشه",
});
}
if (!cellphone) {
return asyncAwesomeAlert("خطا", "شماره موبایل خود را وارد کنید.", {
showCancelButton: false,
confirmText: "باشه",
});
} else {
if (cellphone.slice(0, 2) !== "09") {
return asyncAwesomeAlert(
"خطا",
"فرمت شماره موبایل وارد شده اشتباه است.",
{
showCancellphoneButton: false,
confirmText: "باشه",
}
);
}
if (cellphone.length !== 11) {
return asyncAwesomeAlert(
"خطا",
"شماره موبایل میبایست یازده رقم باشد.",
{
showCancelButton: false,
confirmText: "باشه",
}
);
}
}
if (!phone) {
return asyncAwesomeAlert("خطا", "شماره تلفن خود را وارد کنید.", {
showCancelButton: false,
confirmText: "باشه",
});
} else {
if (phone.slice(0, 1) !== "0") {
return asyncAwesomeAlert(
"خطا",
"فرمت شماره تلفن وارد شده اشتباه است.",
{
showCancelButton: false,
confirmText: "باشه",
}
);
}
if (phone.length !== 11) {
return asyncAwesomeAlert("خطا", "شماره تلفن میبایست یازده رقم باشد.", {
showCancelButton: false,
confirmText: "باشه",
});
}
}
if (!provinceId) {
return asyncAwesomeAlert("خطا", "نام استان خود را وارد کنید.", {
showCancelButton: false,
confirmText: "باشه",
});
}
if (!cityId) {
return asyncAwesomeAlert("خطا", "نام شهرستان خود را وارد کنید.", {
showCancelButton: false,
confirmText: "باشه",
});
}
if (!postalCode) {
return asyncAwesomeAlert("خطا", "کد پستی خود را وارد کنید.", {
showCancelButton: false,
confirmText: "باشه",
});
} else {
if (postalCode.length !== 10) {
return asyncAwesomeAlert("خطا", "کد ملی میبایست ده رقم باشد.", {
showCancelButton: false,
confirmText: "باشه",
});
}
}
if (!mapAddress) {
return asyncAwesomeAlert("خطا", "آدرس خود را از روی نقشه انتخاب کن", {
showCancelButton: false,
confirmText: "باشه",
});
}
createAddress({
firstName,
lastName,
cellphone,
phone,
address: mapAddress,
provinceId: provinces.filter(
(province) => province.name === provinceId
)[0].id,
cityId: cities.filter((city) => city.name === cityId)[0]?.id,
postalCode,
location: null,
});
navigation.goBack();
};
const submitProfile = () => {
const {
firstName,
lastName,
username,
password,
postalCode,
address,
email,
phone,
picFileId,
gender,
nationalId,
birthDate,
schools,
gradeIds,
status,
provinceId,
cityId,
docFileIds,
} = profileFields;
if (phone) {
if (phone.slice(0, 1) !== "0") {
return asyncAwesomeAlert(
"خطا",
"فرمت شماره تلفن وارد شده اشتباه است.",
{
showCancelButton: false,
confirmText: "باشه",
}
);
}
if (phone.length !== 11) {
return asyncAwesomeAlert("خطا", "شماره تلفن میبایست یازده رقم باشد.", {
showCancelButton: false,
confirmText: "باشه",
});
}
}
const data = {
firstName: firstName,
lastName: lastName,
username: username,
cellphone: user.cellphone,
password: password,
postalCode: postalCode,
address: address,
email: email,
phone: phone,
nationalId: nationalId,
picFileId: picFileId,
gender: gender,
birthDate: birthDate,
schools: schools,
gradeIds: gradeIds,
status: status,
provinceId: provinceId,
cityId: cityId,
docFileIds: docFileIds,
};
setProfile(data);
navigation.goBack();
};
const Header = ({ title, text }) => {
return (
{title}
{text}
);
};
return (
profilePage
? setProfileFields({ ...profileFields, firstName: value })
: onChange(name, value)
}
autoFocus={false}
regex={(val) => val}
/>
profilePage
? setProfileFields({ ...profileFields, lastName: value })
: onChange(name, value)
}
autoFocus={false}
regex={(val) => val}
/>
{profilePage ? (
setProfileFields({ ...profileFields, nationalId: value })
}
autoFocus={false}
regex={(text) => onInput.numberOnly(text)}
/>
) : null}
profilePage
? setProfileFields({ ...profileFields, cellphone: value })
: onChange(name, value)
}
autoFocus={false}
regex={(text) => onInput.numberOnly(text)}
/>
profilePage
? setProfileFields({ ...profileFields, phone: value })
: onChange(name, value)
}
autoFocus={false}
regex={(text) => onInput.numberOnly(text)}
/>
{!profilePage ? (
setMapAddress(text)}
placeholderTextColor={
theme === "light"
? Colors.theme1.gray2077
: Colors.theme1.white + "aa"
}
/>
) : null}
profilePage
? setProfileFields({
...profileFields,
postalCode: value,
})
: onChange(name, value)
}
autoFocus={false}
regex={(text) => onInput.numberOnly(text)}
/>
(profilePage ? submitProfile() : submit())}
/>
);
};
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 0,
},
container: {
flexDirection: "column",
paddingVertical: 5,
paddingHorizontal: 16,
flex: 1,
},
});
const mapStateToProps = (state) => ({
provinces: state.publicApi.provinces,
province: state.publicApi.province,
cities: state.publicApi.cities,
city: state.publicApi.city,
loading: state.userAddress.loading,
cityLoading: state.publicApi.loading,
user: state.user.status,
profileFields: state.user.profileFields,
mobile: state.publicApi.mobile,
theme: state.publicApi.theme,
});
const mapDispatchToProps = {
getProvince: publicApi.getProvince,
getCity: publicApi.getCity,
createAddress: userAddress.add,
setProfileFields: user.setProfileFields,
setProfile: user.setProfile,
};
export default connect(mapStateToProps, mapDispatchToProps)(Address);