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

import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { useState } from "react";
import fontSize from "../../utils/fontsizeUtils";
import LocationPinIcon from "../../components/LocationPinIcon";
import { Picker } from "@react-native-picker/picker";
import { AddressDataItem,OrderData } from "../../services/api/orders";

export const ShippingFee = () => {
  const [shippingMethod, setShippingMethod] = useState("sea");
  const [warehouse, setWarehouse] = useState<number>();
  const [freightForwarderAddress, setFreightForwarderAddress] =
  useState<AddressDataItem>();
  const [orderData, setOrderData] = useState<OrderData>();
  const changeCountryHandel = async (value: number) => {

  }

  return (
    <View style={styles.recipientFormContainer3}>
      <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>

        <View style={styles.border}></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>
              <View style={styles.selectWrapper}>
                <Picker
                  selectedValue={warehouse}
                  onValueChange={(value) => {
                    setWarehouse(value);
                    changeCountryHandel(value);
                  }}
                >
                  {freightForwarderAddress?.other_addresses.map(
                    (item, index) => (
                      <Picker.Item
                        label={item.country}
                        value={item.country_code}
                        key={index}
                      />
                    )
                  )}
                </Picker>
              </View>
            </View>

            {warehouse && (
              <View style={styles.shippingInfo}>
                <Text style={styles.shippingInfoRow}>
                  <Text style={styles.shippingInfoLabel}>
                    Estimated Arrival:{" "}
                  </Text>
                  <Text style={{ flex: 1, textAlign: "left", marginLeft: 10 }}>
                    {shippingMethod === "sea"
                      ? orderData?.shipping_fee_sea_time
                      : orderData?.shipping_fee_air_time}
                  </Text>
                </Text>

                <View style={styles.shippingInfoRow}>
                  <Text style={styles.shippingInfoLabel}>
                    International Fee:{" "}
                  </Text>
                  <Text
                    style={{
                      color: "#ff6000",
                      flex: 1,
                      textAlign: "left",
                      marginLeft: 10,
                      fontWeight: "600",
                    }}
                  >
                    {shippingMethod === "sea"
                      ? orderData?.shipping_fee_sea
                      : orderData?.shipping_fee_air}
                  </Text>

                  <Text style={{ color: "#ff6000" }}>(Cash on Delivery)</Text>
                </View>
              </View>
            )}
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  section: {
    backgroundColor: "#fff",
    borderRadius: 8,
    paddingLeft: 16,
    paddingRight: 16,
  },
  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",
  },
  recipientFormContainer1: {
    width: "100%",
    padding: 15,
    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",
  },
  shippingInfo: {
    marginTop: 12,
    padding: 12,
    backgroundColor: "#f9f9f9",
    borderRadius: 6,
  },
  shippingInfoRow: {
    fontSize: fontSize(13),
    marginBottom: 6,
    color: "#333",
    flexDirection: "row",
    justifyContent: "space-between",
  },
  shippingInfoLabel: {
    color: "#777",
    fontWeight: "500",
    fontSize: fontSize(13),
  },


});