water-sys/app/screens/previewOrder/ShippingFee.tsx

import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ActivityIndicator,
  Modal,
  FlatList,
  SafeAreaView,
  Alert,
} from "react-native";
import { useState, useEffect } from "react";
import fontSize from "../../utils/fontsizeUtils";
import LocationPinIcon from "../../components/LocationPinIcon";
import {
  AddressDataItem,
  OrderData,
  Address,
  CartShippingFeeData,
  DomesticShippingFeeData,
} from "../../services/api/orders";
import usePreviewShippingStore from "../../store/previewShipping";
import { getSubjectTransLanguage } from "../../utils/languageUtils";
import BackIcon from "../../components/BackIcon";
import { useNavigation, useRoute, RouteProp } from "@react-navigation/native";
import useCreateOrderStore  from "../../store/createOrder";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import useUserStore from "../../store/user";
type RootStackParamList = {
  ShippingFee: undefined;
  PaymentMethod: { freight_forwarder_address_id: number };
};
type ShippingFeeParams = {
  cart_item_id: {
    items: any[];
    cart_item_id: number;
  };
};


export const ShippingFee = () => {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const route =
    useRoute<RouteProp<Record<string, ShippingFeeParams>, string>>();
  const {
    fetchFreightForwarderAddress,
    state,
    calculateShippingFee,
    calculateDomesticShippingFee,
  } = usePreviewShippingStore();
  const [shippingMethod, setShippingMethod] = useState("sea");
  const [warehouse, setWarehouse] = useState<string>();
  const [freightForwarderAddress, setFreightForwarderAddress] =
    useState<AddressDataItem>();

  const [shippingFeeData, setShippingFeeData] = useState<CartShippingFeeData>();

  const [modalVisible, setModalVisible] = useState(false);
  const [selectedWarehouseLabel, setSelectedWarehouseLabel] = useState("");
  const [selectedWarehouse, setSelectedWarehouse] = useState<Address>();
  const [domesticShippingFeeData, setDomesticShippingFeeData] =
    useState<DomesticShippingFeeData>();
  const [isDomesticShippingLoading, setIsDomesticShippingLoading] = useState(false);
  const [count,setCount] = useState<string>();
  const [apiResponses, setApiResponses] = useState({
    shippingFees: false,
    domesticShippingFees: false
  });

  const { setOrderData ,orderData,items} = useCreateOrderStore();
  const [countryCode,setCountryCode] = useState<number>();
  const userStore = useUserStore();
  const getFreightForwarderAddress = async () => {
    await fetchFreightForwarderAddress(0);
  };

  useEffect(() => {
    getFreightForwarderAddress();
  }, []);

  useEffect(() => {
    if (state.freightForwarderAddress) {
      setFreightForwarderAddress(state.freightForwarderAddress);
      // 设置默认选择第一项
      if (
        state.freightForwarderAddress.other_addresses &&
        state.freightForwarderAddress.other_addresses.length > 0
      ) {
        const firstItem = state.freightForwarderAddress.other_addresses[0];
        const label = firstItem.country + "|" + firstItem.city;
        setWarehouse(label);
        setSelectedWarehouseLabel(label);
        setCountryCode(firstItem.country_code);
      }
    }
  }, [state.freightForwarderAddress]);

  useEffect(() => {
    if (state.shippingFees) {
      setShippingFeeData(state.shippingFees);
      setCount('正在计算国际价格');
      setApiResponses(prev => ({...prev, shippingFees: true}));
    }
  }, [state.shippingFees]);

  useEffect(() => {
    if (state.domesticShippingFees) {
      setDomesticShippingFeeData(state.domesticShippingFees);
      setApiResponses(prev => ({...prev, domesticShippingFees: true}));
    }
  }, [state.domesticShippingFees]);

  // Effect to handle loading state based on both API responses
  useEffect(() => {
    if (apiResponses.shippingFees && apiResponses.domesticShippingFees) {
      setIsDomesticShippingLoading(false);
    }
  }, [apiResponses]);

  // Call changeCountryHandel when warehouse changes
  useEffect(() => {
    if (warehouse && freightForwarderAddress?.other_addresses) {
      changeCountryHandel(warehouse);
    }
  }, [warehouse, freightForwarderAddress]);

  const changeCountryHandel = async (value: string) => {
    if (value && freightForwarderAddress?.other_addresses) {
      const selectedWarehouse = freightForwarderAddress.other_addresses.find(
        (item) => item.country + "|" + item.city === value
      );

      setSelectedWarehouse(selectedWarehouse);

      if (selectedWarehouse && items) {
        const data = {
          items: items,
          freight_forwarder_address_id: selectedWarehouse.address_id,
        };
        
        // Only calculate if we have the necessary data
        if (data.items && data.freight_forwarder_address_id) {
          // Set loading state to true before making API calls
          setIsDomesticShippingLoading(true);
          setCount('正在计算国内价格');
          // Reset API response tracking
          setApiResponses({
            shippingFees: false,
            domesticShippingFees: false
          });
          
          calculateShippingFee(data);
          calculateDomesticShippingFee(data);
        }
      }
    }
  };

  const handleSelectWarehouse = (countryCode: number, label: string) => {    
    setWarehouse(label);
    setSelectedWarehouseLabel(label);
    setCountryCode(countryCode);
    setModalVisible(false);
  };

  const handleSubmit = () => {
    if (!isDomesticShippingLoading && domesticShippingFeeData?.total_shipping_fee != null) {
      setOrderData({
        ...orderData,
        transport_type: shippingMethod === "sea" ? 0 : 1,
        domestic_shipping_fee: domesticShippingFeeData?.total_shipping_fee,
        shipping_fee: shippingMethod === "sea" 
          ? shippingFeeData?.total_shipping_fee_sea
          : shippingFeeData?.total_shipping_fee_air,
          receiver_address:selectedWarehouseLabel
      });
      navigation.navigate("PaymentMethod", {freight_forwarder_address_id: selectedWarehouse?.address_id || 0});
    }else{
      Alert.alert("请选择运输方式");
    }
    
  };

  return (
    <View style={styles.recipientFormContainer3}>
      <View style={styles.titleContainer}>
        <View style={styles.backIconContainer}>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <BackIcon size={20} />
          </TouchableOpacity>
        </View>

        <Text style={styles.titleHeading}>运输方式</Text>
      </View>
      {state.isLoading ? (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#f77f3a" />
        </View>
      ) : (
        <View style={styles.recipientFormContainer1}>
          <View style={styles.section}>
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionIcon}>🚢</Text>
              <Text style={styles.sectionTitle}>Shipping Method</Text>
            </View>
            <View style={styles.shippingOptions}>
              {[
                {
                  id: "sea",
                  label: "Sea Shipping",
                  icon: "🚢",
                  detail: "Economical",
                },
                {
                  id: "air",
                  label: "Air Shipping",
                  icon: "✈️",
                  detail: "Express",
                },
              ].map((option, index) => (
                <TouchableOpacity
                  key={option.id}
                  style={[
                    styles.shippingCard,
                    shippingMethod === option.id && styles.shippingCardSelected,
                  ]}
                  onPress={() => {
                    setShippingMethod(option.id);
                  }}
                >
                  {index === 0 && (
                    <View style={styles.locationPin}>
                      <LocationPinIcon size={20} />
                    </View>
                  )}
                  <Text style={styles.shippingIcon}>{option.icon}</Text>
                  <Text style={styles.shippingLabel}>{option.label}</Text>
                  <Text style={styles.shippingDetail}>{option.detail}</Text>
                </TouchableOpacity>
              ))}
            </View>
          </View>

          {/* Warehouse Selection */}
          <View style={styles.section}>
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionIcon}>🏭</Text>
              <Text style={styles.sectionTitle}>Delivery Warehouse</Text>
            </View>
            <View style={{ marginTop: 12 }}>
              <View style={styles.selectBox}>
                <Text style={styles.selectLabel}>Select a warehouse:</Text>
                <TouchableOpacity
                  style={styles.selectWrapper}
                  onPress={() => setModalVisible(true)}
                >
                  <Text style={styles.selectedText}>
                    {selectedWarehouseLabel || "Select warehouse"}
                  </Text>
                  <Text style={styles.dropdownIcon}>▼</Text>
                </TouchableOpacity>

                {/* Modal Dropdown */}
                <Modal
                  visible={modalVisible}
                  transparent={true}
                  animationType="slide"
                  onRequestClose={() => setModalVisible(false)}
                >
                  <TouchableOpacity
                    style={styles.modalOverlay}
                    activeOpacity={1}
                    onPress={() => setModalVisible(false)}
                  >
                    <View style={styles.modalContainer}>
                      <SafeAreaView style={styles.modalContent}>
                        <View style={styles.modalHeader}>
                          <Text style={styles.modalTitle}>
                            Select Warehouse
                          </Text>
                          <TouchableOpacity
                            onPress={() => setModalVisible(false)}
                          >
                            <Text style={styles.closeButton}>×</Text>
                          </TouchableOpacity>
                        </View>
                        <FlatList
                          data={freightForwarderAddress?.other_addresses || []}
                          keyExtractor={(item, index) => index.toString()}
                          renderItem={({ item }) => (
                            <TouchableOpacity
                              style={[
                                styles.optionItem,
                                warehouse === item.country + "|" + item.city &&
                                  styles.selectedOption,
                              ]}
                              onPress={() =>
                                handleSelectWarehouse(
                                  item.country_code,
                                  item.country + "|" + item.city
                                )
                              }
                            >
                              <Text style={styles.optionText}>
                                {item.country + "|" + item.city}
                              </Text>
                              {warehouse === item.country + "|" + item.city && (
                                <Text style={styles.checkmark}>✓</Text>
                              )}
                            </TouchableOpacity>
                          )}
                        />
                      </SafeAreaView>
                    </View>
                  </TouchableOpacity>
                </Modal>
              </View>

              {warehouse && (
                <View style={styles.shippingInfo}>
                  <Text style={styles.shippingInfoRow}>
                    <Text style={styles.shippingInfoLabel}>预计到达时间: </Text>
                    <Text
                      style={{ flex: 1, textAlign: "left", marginLeft: 10 }}
                    >
                      {shippingMethod === "sea"
                        ? "45天"
                        : "20天"}
                    </Text>
                  </Text>

                  <View style={styles.shippingInfoRow}>
                    <Text style={styles.shippingInfoLabel}>总运费: </Text>
                    <Text
                      style={{
                        color: "#ff6000",
                        flex: 1,
                        textAlign: "left",
                        marginLeft: 10,
                        fontWeight: "600",
                      }}
                    >
                      {isDomesticShippingLoading ? (
                        <Text style={{ color: "#ff6000",alignItems:"center" }}>{count} <ActivityIndicator size="small" color="#ff6000" style={{ marginLeft: 5 }} /></Text>
                      ) : (
                        <Text style={{ color: "#ff6000" }}>
                          {((domesticShippingFeeData?.total_shipping_fee || 0) + (shippingMethod === "sea"
                        ? (shippingFeeData?.total_shipping_fee_sea || 0)
                        : (shippingFeeData?.total_shipping_fee_air || 0))).toFixed(2)} {''} {userStore.user?.currency}
                        </Text>
                      )}
                    </Text>

                    {/* <Text style={{ color: "#ff6000" }}>(Cash on Delivery)</Text> */}
                  </View>
{/* 
                  <View style={styles.shippingInfoRow}>
                    <Text style={styles.shippingInfoLabel}>国际运费: </Text>
                    <Text
                      style={{
                        color: "#ff6000",
                        flex: 1,
                        textAlign: "left",
                        marginLeft: 10,
                        fontWeight: "600",
                      }}
                    >
                      {shippingMethod === "sea"
                        ? shippingFeeData?.total_shipping_fee_sea
                        : shippingFeeData?.total_shipping_fee_air}
                    </Text>

                  </View> */}
                </View>
              )}
            </View>
          </View>

          <View style={styles.submitButtonContainer}>
            <TouchableOpacity
              style={[
                styles.primaryButtonStyle,
                (isDomesticShippingLoading || domesticShippingFeeData?.total_shipping_fee == null) 
                  ? styles.disabledButtonStyle : {}
              ]}
              onPress={handleSubmit}
              disabled={isDomesticShippingLoading || domesticShippingFeeData?.total_shipping_fee == null}
            >
              <Text style={styles.buttonText}>提交</Text>
            </TouchableOpacity>
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  section: {
    backgroundColor: "#fff",
    borderRadius: 8,
    paddingLeft: 16,
    paddingRight: 16,
    marginTop: 10,
  },
  sectionHeader: {
    flexDirection: "row",
    alignItems: "center",
    paddingTop: 12,
    paddingBottom: 12,
  },
  sectionIcon: { marginRight: 8, fontSize: fontSize(18) },
  sectionTitle: { flex: 1, fontSize: fontSize(15), fontWeight: "500" },
  sectionAction: {
    color: "#ff6000",
    fontSize: fontSize(13),
    fontWeight: "500",
  },
  paymentOptions: {
    marginTop: 12,
    flexDirection: "column",
  },
  recipientInfo: {
    backgroundColor: "#fff",
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 12,
    borderWidth: 1,
    borderColor: "#ccc",
    width: "100%",
    marginBottom: 12,
    flexDirection: "row",
    alignItems: "center",
  },
  recipientInfoIcon: {
    marginRight: 12,
  },
  recipientInfoText: {
    flex: 1,
    fontSize: fontSize(18),
  },

  addRecipient: {
    borderWidth: 1,
    borderColor: "#ccc",
    padding: 12,
    borderRadius: 6,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
  },
  addRecipientIcon: {
    fontSize: fontSize(20),
    color: "#ff6000",
    marginRight: 6,
  },
  addRecipientText: { fontSize: fontSize(14), color: "#666" },

  shippingOptions: {
    flexDirection: "row",
    gap: 10,
    justifyContent: "space-between",
    marginTop: 12,
  },
  shippingCard: {
    flex: 1,
    alignItems: "center",
    padding: 12,
    borderRadius: 6,
    borderWidth: 1,
    borderColor: "#e0e0e0",
    backgroundColor: "#fff",
  },
  shippingCardSelected: { borderColor: "#ff6000", backgroundColor: "#fff" },
  locationPin: {
    position: "absolute",
    top: 8,
    right: 8,
    zIndex: 1,
  },
  shippingIcon: { fontSize: fontSize(22), marginBottom: 6 },
  shippingLabel: { fontSize: fontSize(14), fontWeight: "500" },
  shippingDetail: { fontSize: fontSize(12), color: "#888", marginTop: 3 },
  recipientFormContainer3: {
    flex: 1,
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    backgroundColor: "#fff",
    padding: 15,
  },
  recipientFormContainer1: {
    width: "100%",
    paddingBottom: 32,
  },
  border: {
    height: 6,
    backgroundColor: "#f5f5f5",
    marginTop: 12,
  },
  selectBox: { marginBottom: 12 },
  selectLabel: { fontSize: fontSize(14), marginBottom: 6, color: "#666" },
  selectWrapper: {
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 6,
    overflow: "hidden",
    backgroundColor: "#fff",
    padding: 12,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  selectedText: {
    fontSize: fontSize(14),
    color: "#333",
  },
  dropdownIcon: {
    fontSize: fontSize(12),
    color: "#666",
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "flex-end",
  },
  modalContainer: {
    backgroundColor: "white",
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
    height: "80%",
  },
  modalContent: {
    width: "100%",
  },
  modalHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: "#eee",
  },
  modalTitle: {
    fontSize: fontSize(16),
    fontWeight: "600",
  },
  closeButton: {
    fontSize: fontSize(24),
    color: "#666",
  },
  optionItem: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: "#eee",
  },
  selectedOption: {
    backgroundColor: "#f0f0f0",
  },
  optionText: {
    fontSize: fontSize(14),
  },
  checkmark: {
    color: "#ff6000",
    fontWeight: "bold",
  },
  shippingInfo: {
    marginTop: 12,
    padding: 12,
    backgroundColor: "#f9f9f9",
    borderRadius: 6,
  },
  shippingInfoRow: {
    fontSize: fontSize(13),
    marginBottom: 6,
    color: "#333",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  shippingInfoLabel: {
    color: "#777",
    fontWeight: "500",
    fontSize: fontSize(13),
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  backIconContainer: {
    position: "absolute",
    left: 0,
  },
  titleContainer: {
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
  },
  titleHeading: {
    fontWeight: "600",
    fontSize: 20,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "black",
  },
  submitButtonContainer: {
    paddingRight: 11,
    paddingLeft: 11,
    marginTop: 60,
  },
  primaryButtonStyle: {
    width: "100%",
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    fontWeight: "600",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "white",
    backgroundColor: "#002fa7",
    borderWidth: 0,
    borderRadius: 25,
  },
  buttonText: {
    color: "white",
    fontWeight: "600",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
  },
  selectedCountryText: {
    padding: 0,
    margin: 0,
    fontWeight: "500",
    fontSize: 16,
    lineHeight: 22,
    fontFamily: "PingFang SC",
    color: "#646472",
  },
  disabledButtonStyle: {
    backgroundColor: "#ccc",
  },
});