TIF_NGANJUK_E41212433/screens/ProfilWarga/StatusPengaduan/StatusPengaduan.js

import React, { useState } from "react";
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  TouchableOpacity,
  Image,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";

const dataPengaduan = [
  {
    id: "1",
    judul: "TPS Liar",
    lokasi: "Jl. Sukarno - Jl. Sukarno, Nganjuk",
    tanggal: "05 Januari 2025",
    waktu: "14.32 WIB",
    status: "selesai",
    color: "#D2F3D1",
    adminResponse:
      "Terimakasih telah melaporkan sampah. Berikut bukti foto yang sudah ditindaklanjuti.",
    image:
      "https://5.imimg.com/data5/SELLER/Default/2022/4/LC/DM/QX/8088277/rakshak-self-watering-tree-guard-1000x1000.jpg", // Replace with actual image URL
  },
  {
    id: "2",
    judul: "Sampah berserakan",
    lokasi: "Pasar Lama - Jl. Sukarno, Nganjuk",
    tanggal: "03 Januari 2025",
    waktu: "10.12 WIB",
    status: "dalam proses",
    color: "#E4D9FB",
    adminResponse: "",
    image: "",
  },
  {
    id: "3",
    judul: "Banyak Sampah ini",
    lokasi: "Depan Rumah Ijo - Jl Letjen S Parman",
    tanggal: "03 Januari 2025",
    waktu: "10.12 WIB",
    status: "sedang diverifikasi",
    color: "#FFF8C5",
    adminResponse: "",
    image: "",
  },
  {
    id: "4",
    judul: "Sampah numpuk",
    lokasi: "Depan masjid - Jl Letjen S Parman",
    tanggal: "03 Januari 2025",
    waktu: "10.12 WIB",
    status: "ditolak",
    color: "#FBE2DE",
    reason: "Lokasi tidak sesuai dengan TPS yang valid", // Added reason for rejection
    adminResponse: "",
    image: "",
  },
];

const StatusPengaduan = () => {
  const navigation = useNavigation();
  const [filterStatus, setFilterStatus] = useState("all");

  const handlePress = (item) => {
    navigation.navigate("DetailPengaduan", { item });
  };

  const handleFilterChange = (status) => {
    setFilterStatus(status);
  };

  const filteredData =
    filterStatus === "all"
      ? dataPengaduan
      : dataPengaduan.filter((item) => item.status === filterStatus);

  const renderItem = ({ item }) => (
    <TouchableOpacity
      style={[styles.card, { backgroundColor: item.color }]}
      onPress={() => handlePress(item)}
      activeOpacity={0.8}
    >
      <View style={styles.cardHeader}>
        <Text style={styles.judul}>{item.judul}</Text>
        <Text style={styles.tanggal}>{item.tanggal}</Text>
      </View>
      <Text style={styles.lokasi}>{item.lokasi}</Text>
      <View style={styles.cardFooter}>
        <StatusBadge status={item.status} />
        {item.status === "ditolak" && item.reason && (
          <Text style={styles.rejectionReason}>{item.reason}</Text>
        )}
        <Text style={styles.waktu}>{item.waktu}</Text>
      </View>

      {/* Admin Response Section */}
      {item.adminResponse && (
        <View style={styles.adminResponseContainer}>
          <Text style={styles.adminResponse}>{item.adminResponse}</Text>
          {item.image ? (
            <View style={styles.imageContainer}>
              <Text style={styles.imageText}>Bukti Foto:</Text>
              <Image source={{ uri: item.image }} style={styles.image} />
            </View>
          ) : null}
        </View>
      )}
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Ionicons name="arrow-back" size={24} color="black" />
        </TouchableOpacity>
        <Text style={styles.headerText}>STATUS PENGADUAN</Text>
      </View>

      {/* Filter Buttons */}
      <View style={styles.filterContainer}>
        <TouchableOpacity
          style={[
            styles.filterButton,
            filterStatus === "sedang diverifikasi" && styles.selectedFilter,
          ]}
          onPress={() => handleFilterChange("sedang diverifikasi")}
        >
          <Text style={styles.filterText}>Sedang Verifikasi</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.filterButton,
            filterStatus === "dalam proses" && styles.selectedFilter,
          ]}
          onPress={() => handleFilterChange("dalam proses")}
        >
          <Text style={styles.filterText}>Dalam Proses</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.filterButton,
            filterStatus === "selesai" && styles.selectedFilter,
          ]}
          onPress={() => handleFilterChange("selesai")}
        >
          <Text style={styles.filterText}>Selesai</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.filterButton,
            filterStatus === "ditolak" && styles.selectedFilter,
          ]}
          onPress={() => handleFilterChange("ditolak")}
        >
          <Text style={styles.filterText}>Ditolak</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.filterButton,
            filterStatus === "all" && styles.selectedFilter,
          ]}
          onPress={() => handleFilterChange("all")}
        >
          <Text style={styles.filterText}>All</Text>
        </TouchableOpacity>
      </View>

      {/* List */}
      <FlatList
        data={filteredData}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        contentContainerStyle={{ padding: 16 }}
      />
    </View>
  );
};

const StatusBadge = ({ status }) => {
  let bgColor = "#ccc";
  let textColor = "#000";

  switch (status) {
    case "selesai":
      bgColor = "#FFF";
      textColor = "#000";
      break;
    case "dalam proses":
      bgColor = "#FFF";
      textColor = "#000";
      break;
    case "sedang diverifikasi":
      bgColor = "#FFF";
      textColor = "#000";
      break;
    case "ditolak":
      bgColor = "#FFF";
      textColor = "#000";
      break;
  }

  return (
    <View style={[styles.statusBadge, { backgroundColor: bgColor }]}>
      <Text style={[styles.statusText, { color: textColor }]}>{status}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    padding: 20,
    backgroundColor: "#fff",
    borderBottomWidth: 1,
    borderColor: "#fff",
    marginTop: 40,
  },
  headerText: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#000",
    marginLeft: 10,
  },
  filterContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 16,
    borderColor: "#000",
  },
  filterButton: {
    paddingVertical: 8,
    paddingHorizontal: 12,
    backgroundColor: "#fff",
    borderRadius: 20,
    borderColor: "#000",
    borderWidth: 0.5,
  },
  selectedFilter: {
    backgroundColor: "#ddd",
  },
  filterText: {
    fontSize: 14,
    color: "#000",
  },
  card: {
    padding: 14,
    borderRadius: 12,
    marginBottom: 16,
    borderWidth: 1,
    borderColor: "#000",
  },
  cardHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  judul: {
    fontSize: 16,
    fontWeight: "bold",
  },
  tanggal: {
    fontSize: 12,
    color: "#555",
  },
  lokasi: {
    fontSize: 13,
    color: "#444",
    marginVertical: 4,
  },
  cardFooter: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 8,
  },
  waktu: {
    fontSize: 12,
    color: "#666",
  },
  statusBadge: {
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 20,
    borderWidth: 0.5,
  },
  statusText: {
    fontSize: 12,
    fontWeight: "600",
  },
  rejectionReason: {
    fontSize: 12,
    color: "#000",
    marginTop: 4,
    fontStyle: "italic",
  },
  adminResponseContainer: {
    marginTop: 12,
    padding: 10,
    backgroundColor: "#f4f4f4",
    borderRadius: 8,
    borderWidth: 1,
    borderColor: "#ddd",
  },
  adminResponse: {
    fontSize: 14,
    fontStyle: "italic",
    color: "#555",
  },
  imageContainer: {
    marginTop: 8,
  },
  imageText: {
    fontSize: 14,
    fontWeight: "bold",
  },
  image: {
    width: 200,
    height: 150,
    marginTop: 8,
    borderRadius: 8,
  },
});

export default StatusPengaduan;