import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
} from "react-native";
import { Ionicons } from "@expo/vector-icons"; // Importing icons

const Donasi = ({ navigation }) => {
  const [donationAmount, setDonationAmount] = useState("");
  const [selectedGoal, setSelectedGoal] = useState(null);
  const [description, setDescription] = useState("");

  // Format donation input with thousands separator
  const formatAmount = (amount) => {
    return amount
      .replace(/[^\d]/g, "") // Remove non-numeric characters
      .replace(/\B(?=(\d{3})+(?!\d))/g, "."); // Add period as thousand separator
  };

  const handleDonationAmountChange = (value) => {
    const formattedValue = formatAmount(value);
    setDonationAmount(formattedValue);
  };

  // Handle Goal Selection
  const handleGoalSelection = (goal) => {
    setSelectedGoal(goal);
  };

  // Check if all fields are filled
  const isFormValid = () => {
    return donationAmount && selectedGoal && description.trim() !== "";
  };

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

      {/* Donation Amount Input */}
      <View style={styles.inputSection}>
        <Text style={styles.inputLabel}>Jumlah Donasi</Text>
        <View style={styles.donationInputContainer}>
          <Text style={styles.rpLabel}>Rp.</Text>
          <TextInput
            style={styles.donationInput}
            placeholder="Masukkan jumlah donasi"
            placeholderTextColor="#888" // Gray placeholder text color
            keyboardType="numeric"
            value={donationAmount}
            onChangeText={handleDonationAmountChange}
          />
        </View>
      </View>

      {/* Donation Goal Selection */}
      <View style={styles.goalsSection}>
        <Text style={styles.inputLabel}>Tujuan Donasi</Text>
        <View style={styles.goalsContainer}>
          {[
            "Pengelolaan Sampah",
            "Program Penghijauan",
            "Edukasi Lingkungan",
            "Fasilitas Ramah Lingkungan",
            "Kegiatan Pembersihan Lingkungan",
          ].map((goal) => (
            <TouchableOpacity
              key={goal}
              style={[
                styles.goalButton,
                selectedGoal === goal && styles.selectedGoalButton,
              ]}
              onPress={() => handleGoalSelection(goal)}
            >
              <Text
                style={
                  selectedGoal === goal
                    ? styles.selectedGoalText
                    : styles.goalText
                }
              >
                {goal}
              </Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>

      {/* Description Input */}
      <View style={styles.inputSection}>
        <Text style={styles.inputLabel}>Deskripsi</Text>
        <TextInput
          style={styles.descriptionInput}
          placeholder="Tuliskan deskripsi (opsional)"
          multiline
          numberOfLines={4}
          value={description}
          onChangeText={setDescription}
        />
      </View>

      {/* Next Button */}
      <TouchableOpacity
        style={[styles.nextButton, !isFormValid() && styles.disabledButton]}
        onPress={() => isFormValid() && navigation.navigate("MetodeDonasi")}
        disabled={!isFormValid()} // Disable if form is not valid
      >
        <Text style={styles.nextButtonText}>Selanjutnya</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#f9f9f9",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
    marginTop: 30,
  },
  backButton: {
    marginRight: 10,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#333",
  },
  inputSection: {
    marginBottom: 20,
  },
  inputLabel: {
    fontSize: 16,
    color: "#333",
    marginBottom: 8,
  },
  donationInputContainer: {
    flexDirection: "row",
    alignItems: "center",
    borderColor: "#ddd",
    borderWidth: 1,
    borderRadius: 8,
    paddingLeft: 15,
    backgroundColor: "#fff",
  },
  rpLabel: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#333",
    marginRight: 10,
  },
  donationInput: {
    height: 50,
    flex: 1,
    fontSize: 18,
    fontWeight: "bold",
    backgroundColor: "#fff",
  },
  goalsSection: {
    marginBottom: 20,
  },
  goalsContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 10,
  },
  goalButton: {
    borderWidth: 1,
    borderColor: "#ddd",
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 5,
    backgroundColor: "#f0f0f0",
  },
  selectedGoalButton: {
    borderColor: "#2D572C",
    backgroundColor: "#e0f7e0",
  },
  goalText: {
    fontSize: 14,
    color: "#333",
  },
  selectedGoalText: {
    fontSize: 14,
    color: "#2D572C",
  },
  descriptionInput: {
    height: 100,
    borderColor: "#ddd",
    borderWidth: 1,
    borderRadius: 8,
    paddingLeft: 15,
    paddingTop: 10,
    fontSize: 14,
    backgroundColor: "#fff",
  },
  nextButton: {
    backgroundColor: "#2D572C",
    paddingVertical: 15,
    borderRadius: 8,
    alignItems: "center",
  },
  disabledButton: {
    backgroundColor: "#b0b0b0", // Disabled button color
  },
  nextButtonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
});

export default Donasi;