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

const PosterEdukasiScreen = () => {
  const navigation = useNavigation();
  // State untuk menyimpan daftar poster
  const [posters, setPosters] = useState([
    { id: 1, image: require("../../assets/images/poster1.png") },
    { id: 2, image: require("../../assets/images/poster2.png") }, // Tambah poster kedua
    { id: 2, image: require("../../assets/images/poster3.png") }, // Tambah poster kedua
    // Tambahkan poster lainnya sesuai kebutuhan
  ]);

  // Handle add poster action
  const handleAddPoster = () => {
    navigation.navigate("AddPosterScreen");
  };

  // Fungsi untuk menghapus poster
  const handleDeletePoster = (posterId) => {
    Alert.alert(
      "Hapus Poster",
      "Apakah Anda yakin ingin menghapus poster ini?",
      [
        {
          text: "Batal",
          style: "cancel",
        },
        {
          text: "Hapus",
          onPress: () => {
            // Hapus poster berdasarkan ID
            const updatedPosters = posters.filter(
              (poster) => poster.id !== posterId
            );
            setPosters(updatedPosters);
            ToastAndroid.show("Poster telah dihapus", ToastAndroid.SHORT);
          },
        },
      ]
    );
  };

  return (
    <ScrollView style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Ionicons name="arrow-back" size={24} color="#000" />
        </TouchableOpacity>
        <Text style={styles.title}>POSTER EDUKASI</Text>
      </View>

      {/* Daftar Poster */}
      <View style={styles.posterList}>
        {posters.map((poster) => (
          <View key={poster.id} style={styles.posterItem}>
            <TouchableOpacity onPress={() => handleDeletePoster(poster.id)}>
              <Image source={poster.image} style={styles.posterImage} />
              {/* Tombol Hapus Poster */}
              <TouchableOpacity
                style={styles.deleteIcon}
                onPress={() => handleDeletePoster(poster.id)}
              >
                <Ionicons name="trash" size={24} color="white" />
              </TouchableOpacity>
            </TouchableOpacity>
          </View>
        ))}
      </View>

      {/* Add Poster Button */}
      <View style={styles.addPosterContainer}>
        <TouchableOpacity style={styles.addButton} onPress={handleAddPoster}>
          <Ionicons name="add-circle" size={24} color="#FFF" />
          <Text style={styles.addButtonText}>Tambah Poster</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF",
    padding: 16,
  },
  header: {
    marginTop: 40,
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
  },
  backButton: {
    marginRight: 12,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#000",
  },
  posterList: {
    marginBottom: 20,
  },
  posterItem: {
    position: "relative",
    marginBottom: 15,
  },
  posterImage: {
    width: "100%",
    height: 250,
    resizeMode: "contain",
    borderRadius: 8,
  },
  deleteIcon: {
    position: "absolute",
    top: 10,
    right: 10,
    backgroundColor: "red",
    padding: 6,
    borderRadius: 16,
  },
  addPosterContainer: {
    marginTop: 20,
    alignItems: "center",
    marginBottom: 50,
  },
  addButton: {
    backgroundColor: "#2D572C",
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 8,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  addButtonText: {
    color: "#FFF",
    fontWeight: "bold",
    marginLeft: 8,
  },
});

export default PosterEdukasiScreen;