import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Image,
  Alert,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import { Ionicons } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker";

export default function EditInformasiPribadi() {
  const [noHp, setNoHp] = useState("087786770760");
  const [alamat, setAlamat] = useState(
    "Jl Letjen. S.Parman IV Cangkringan Nganjuk"
  );
  const [profileImage, setProfileImage] = useState(null); // Gambar profil diubah ke null pertama kali

  // Fungsi untuk memilih gambar baru
  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });

    if (!result.cancelled) {
      setProfileImage(result.uri); // Menyimpan URI gambar yang dipilih
    }
  };

  // Fungsi untuk menghapus foto profil
  const deleteProfileImage = () => {
    Alert.alert(
      "Hapus Foto Profil",
      "Apakah Anda yakin ingin menghapus foto profil?",
      [
        { text: "Batal", style: "cancel" },
        { text: "Hapus", onPress: () => setProfileImage(null) }, // Menghapus gambar
      ]
    );
  };

  // Fungsi untuk menyimpan perubahan
  const saveChanges = () => {
    Alert.alert(
      "Konfirmasi Perubahan",
      "Apakah yakin ingin merubah data pribadi anda?",
      [
        { text: "Batal", style: "cancel" },
        {
          text: "Simpan",
          onPress: () => {
            // Implementasikan logika penyimpanan di sini
            console.log("Perubahan disimpan");
            navigation.goBack();
          },
        },
      ]
    );
  };
  const navigation = useNavigation();

  // State untuk menyimpan nilai input dan foto profil
  const [email, setEmail] = useState("dinadwi03@gmail.com");

  return (
    <View style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => navigation.goBack()}
          style={styles.backIcon}
        >
          <Ionicons name="arrow-back" size={24} color="#000" />
        </TouchableOpacity>
        <Text style={styles.headerText}>EDIT INFORMASI PRIBADI</Text>
      </View>

      <ScrollView contentContainerStyle={styles.content}>
        {/* Profile Section */}
        <View style={styles.profileContainer}>
          {profileImage ? (
            <Image source={{ uri: profileImage }} style={styles.profileImage} />
          ) : (
            <Image
              source={require("../../../assets/images/fotoprofil.jpeg")} // Gambar default
              style={styles.profileImage}
            />
          )}
          <TouchableOpacity
            style={styles.changeImageButton}
            onPress={pickImage}
          >
            <Text style={styles.changeImageButtonText}>Ganti Foto Profil</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.deleteImageButton}
            onPress={deleteProfileImage}
          >
            <Text style={styles.deleteImageButtonText}>Hapus Foto Profil</Text>
          </TouchableOpacity>
        </View>

        {/* Input Form */}
        <View style={styles.inputContainer}>
          <Text style={styles.label}>Email</Text>
          <TextInput
            style={styles.input}
            value={email}
            onChangeText={setEmail}
            keyboardType="email-address"
          />

          <Text style={styles.label}>No. HP</Text>
          <TextInput
            style={styles.input}
            value={noHp}
            onChangeText={setNoHp}
            keyboardType="phone-pad"
          />

          <Text style={styles.label}>Alamat</Text>
          <TextInput
            style={styles.input}
            value={alamat}
            onChangeText={setAlamat}
          />
        </View>

        {/* Save Button */}
        <TouchableOpacity style={styles.saveButton} onPress={saveChanges}>
          <Text style={styles.saveButtonText}>SIMPAN</Text>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  header: {
    backgroundColor: "#fff",
    paddingVertical: 20,
    paddingHorizontal: 16,
    flexDirection: "row",
    alignItems: "center",
    marginTop: 40,
  },
  backIcon: {
    marginRight: 16,
  },
  headerText: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#000",
  },
  content: {
    padding: 20,
  },
  profileContainer: {
    alignItems: "center",
    marginBottom: 20,
  },
  profileImage: {
    width: 100,
    height: 100,
    borderRadius: 50,
    borderWidth: 2,
    borderColor: "#2D572C",
  },
  profileImagePlaceholder: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: "#ddd",
    justifyContent: "center",
    alignItems: "center",
  },
  profileImageText: {
    color: "#fff",
    fontWeight: "bold",
    fontSize: 16,
  },
  changeImageButton: {
    marginTop: 10,
    backgroundColor: "#4CAF50",
    paddingVertical: 8,
    paddingHorizontal: 20,
    borderRadius: 20,
    marginBottom: 10,
  },
  changeImageButtonText: {
    color: "#fff",
    fontWeight: "bold",
  },
  deleteImageButton: {
    backgroundColor: "#d32f2f",
    paddingVertical: 8,
    paddingHorizontal: 20,
    borderRadius: 20,
  },
  deleteImageButtonText: {
    color: "#fff",
    fontWeight: "bold",
  },
  inputContainer: {
    marginBottom: 30,
  },
  label: {
    fontSize: 14,
    fontWeight: "600",
    color: "#333",
    marginBottom: 5,
  },
  input: {
    backgroundColor: "#fff",
    borderRadius: 10,
    paddingVertical: 12,
    paddingHorizontal: 16,
    marginBottom: 20,
    fontSize: 16,
    borderWidth: 1,
    borderColor: "#ddd",
  },
  saveButton: {
    marginTop: -20,
    backgroundColor: "#2f4f2f",
    padding: 15,
    borderRadius: 10,
    alignItems: "center",
  },
  saveButtonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
});
