TIF_NGANJUK_E41212433/screens/ProfilWarga/StatusPengiriman/DetailPengiriman.js

import React, { useState } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  Linking,
} from "react-native";
import { Ionicons } from "@expo/vector-icons"; // Import Ionicons untuk ikon panah

export default function DetailPengiriman({ route, navigation }) {
  const { item } = route.params; // Mendapatkan data item dari navigation params
  const [status, setStatus] = useState(item.status); // Menentukan status awal sesuai item

  // Fungsi untuk menangani perubahan status
  const handleItemReceived = () => {
    setStatus("selesai"); // Mengubah status menjadi selesai
  };

  // Timeline status pengiriman
  const statusTimeline = {
    diproses: {
      title: "Diproses",
      time: "23 Januari 2025, 15:12 WIB",
    },
    dikirim: {
      title: "Dikirim",
      time: "24 Januari 2025, 10:00 WIB",
    },
    diterima: {
      title: "Diterima",
      time: "25 Januari 2025, 13:00 WIB",
    },
    selesai: {
      title: "Selesai",
      time: "26 Januari 2025, 17:00 WIB",
    },
  };
  const handleContactAdmin = () => {
    const phoneNumber = "6287786770760"; // Ganti dengan nomor WhatsApp admin
    const message = "Halo Admin, saya ingin menanyakan tentang pengiriman."; // Pesan default yang ingin dikirim

    const url = `whatsapp://send?phone=${phoneNumber}&text=${encodeURIComponent(
      message
    )}`;

    // Mengecek apakah WhatsApp dapat dibuka
    Linking.openURL(url).catch((err) => {
      console.error("Error opening WhatsApp:", err);
    });
  };
  const currentItem = {
    ...item,
    statusDetails:
      status === "diproses"
        ? "Barang sedang diproses oleh kami."
        : status === "dikirim"
        ? "Barang telah dikirim melalui JNE."
        : status === "diterima"
        ? "Barang telah diterima, terima kasih telah berbelanja!"
        : "Pengiriman selesai. Terima kasih!",
    estimatedDate:
      status === "diterima"
        ? "Tidak ada tanggal estimasi lebih lanjut."
        : "Diperkirakan tiba pada 30 Januari 2025.",
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Ionicons name="arrow-back" size={24} color="#333" />
        </TouchableOpacity>
        <Text style={styles.title}>DETAIL STATUS PENGIRIMAN</Text>
      </View>

      {/* Hubungi Admin Button */}
      <TouchableOpacity
        style={styles.contactButton}
        onPress={handleContactAdmin}
      >
        <Text style={styles.contactText}>Hubungi Admin</Text>
      </TouchableOpacity>

      {/* Image */}
      <Image source={currentItem.imageUri} style={styles.image} />

      {/* Product Details */}
      <View style={styles.productInfo}>
        <Text style={styles.productName}>{currentItem.name}</Text>
        <Text style={styles.productPoints}>{currentItem.points}</Text>
      </View>

      {/* Status Progress */}
      <View style={styles.statusContainer}>
        <Text style={styles.statusTitle}>Proses Pengiriman</Text>
        <View style={styles.statusTimeline}>
          {Object.keys(statusTimeline).map((step, index) => (
            <View
              key={index}
              style={status === step ? styles.activeStep : styles.step}
            >
              <Text style={styles.stepText}>{statusTimeline[step].title}</Text>
              <Text style={styles.time}>{statusTimeline[step].time}</Text>
            </View>
          ))}
        </View>
      </View>

      {/* Status Detail */}
      <View style={styles.statusDetail}>
        <Text style={styles.statusDetails}>{currentItem.statusDetails}</Text>
      </View>

      {/* Estimated Delivery */}
      <View style={styles.estimatedDelivery}>
        <Text style={styles.estimatedText}>{currentItem.estimatedDate}</Text>
      </View>

      {/* Shipping Information */}
      <View style={styles.shippingInfo}>
        <Text style={styles.shippingTitle}>Alamat Pengiriman</Text>
        <Text style={styles.shippingDetails}>
          Jl. Letjen S. Parman IV Ds. Cangkringan Kab. Nganjuk
        </Text>
        <Text style={styles.shippingTitle}>Jasa Pengiriman</Text>
        <Text style={styles.shippingDetails}>JNE</Text>
        <Text style={styles.shippingTitle}>No Resi</Text>
        <Text style={styles.shippingDetails}>5679032190775</Text>
      </View>

      {/* Button to mark the item as received (only for 'Diterima' status) */}
      {status === "diterima" && (
        <TouchableOpacity style={styles.button} onPress={handleItemReceived}>
          <Text style={styles.buttonText}>BARANG DITERIMA</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: "#fff",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 30,
    marginTop: 40,
  },
  backButton: {
    marginRight: 10,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#333",
  },
  contactButton: {
    backgroundColor: "#4CAF50",
    padding: 10,
    borderRadius: 5,
    marginBottom: 20,
    alignItems: "center",
    borderRadius: 20,
    marginLeft: 120,
    marginRight: 120,
  },
  contactText: {
    color: "#fff",
    fontSize: 14,
  },
  image: {
    width: 100,
    height: 100,
    alignSelf: "center",
    marginBottom: 16,
  },
  productInfo: {
    alignItems: "center",
    marginBottom: 16,
  },
  productName: {
    fontSize: 18,
    fontWeight: "bold",
  },
  productPoints: {
    fontSize: 14,
    color: "#777",
  },
  statusContainer: {
    marginBottom: 16,
  },
  statusTitle: {
    fontSize: 16,
    fontWeight: "bold",
    marginBottom: 8,
  },
  statusTimeline: {
    flexDirection: "column",
    alignItems: "flex-start",
  },
  step: {
    marginBottom: 12,
  },
  activeStep: {
    marginBottom: 12,
    borderLeftWidth: 4,
    borderColor: "#4CAF50",
    paddingLeft: 12,
  },
  stepText: {
    fontSize: 14,
    fontWeight: "bold",
  },
  time: {
    fontSize: 12,
    color: "#777",
  },
  statusDetail: {
    marginBottom: 16,
  },
  statusDetails: {
    fontSize: 14,
    color: "#777",
  },
  estimatedDelivery: {
    marginBottom: 16,
    alignItems: "center",
  },
  estimatedText: {
    fontSize: 14,
    fontStyle: "italic",
  },
  shippingInfo: {
    marginBottom: 16,
  },
  shippingTitle: {
    fontSize: 14,
    fontWeight: "bold",
  },
  shippingDetails: {
    fontSize: 14,
    marginBottom: 8,
  },
  button: {
    marginTop: 20,
    backgroundColor: "#2f4f2f",
    padding: 15,
    borderRadius: 10,
    alignItems: "center",
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
});