import { View, Text, Pressable, TouchableOpacity, Appearance, ActivityIndicator, } from "react-native"; import React, { useEffect, useCallback } from "react"; import { connect } from "react-redux"; import { useNavigation } from "@react-navigation/native"; import { transport } from "../../../redux/actions"; import separate from "../../../utils/separate"; //style import tw from "tailwind-rn"; import Colors from "../../../constants/Colors"; import fontSize from "../../../constants/fontSize"; const TransportMethod = ({ list, getList, setTransport, factorInfo, userId, loading, }) => { const colorScheme = Appearance.getColorScheme(); useEffect(() => { getList(); }, []); const Method = useCallback( ({ method, active }) => { return ( <Pressable style={[ tw(`flex flex-col items-center w-full px-2 py-1.5 rounded-md mt-3`), { backgroundColor: active ? Colors.theme1[colorScheme].greenCF + "15" : Colors.theme1[colorScheme].grayE3 + "44", borderWidth: 2, borderColor: active ? Colors.theme1[colorScheme].greenCF : Colors.theme1[colorScheme].grayE3, }, ]} onPress={() => !active ? setTransport( { factorId: factorInfo?.id, transportId: method?.id }, { userId }, {} ) : {} } > {loading && !active ? ( <ActivityIndicator size="small" color={ factorInfo?.transportId === method?.id ? Colors.theme1[colorScheme].greenC8 : Colors.theme1[colorScheme].gray20 } /> ) : ( <Text style={{ fontFamily: "bold", fontSize: fontSize.lg, color: active ? Colors.theme1[colorScheme].gray20 : Colors.theme1[colorScheme].gray20, }} > {method.name} </Text> )} <Text style={{ fontFamily: "bold", fontSize: fontSize.sm, color: active ? Colors.theme1[colorScheme].green20 : Colors.theme1[colorScheme].gray20, }} > هزینه ارسال {separate(method.price)} </Text> </Pressable> ); }, [factorInfo, loading] ); return ( <View style={tw("mt-0 w-full")}> <Text style={{ fontSize: fontSize.lg, fontFamily: "bold", color: Colors.theme1[colorScheme].green79, }} > لطفا یک روش ارسال انتخاب کنید </Text> <View style={tw("p-0 m-0 flex flex-col w-full")}> {list?.map((method, index) => ( <Method method={method} key={index} active={factorInfo?.transportId === method?.id} /> ))} </View> </View> ); }; const mapStateToProps = (state) => ({ list: state.transport.list, factorInfo: state.userFactor.info, userId: state.user.status?.id, loading: state.userFactor.loading, }); const mapDispatchToProps = { getList: transport.list, setTransport: transport.set, }; export default connect(mapStateToProps, mapDispatchToProps)(TransportMethod);