import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  StatusBar,
  Image,
} from "react-native";
import { Ionicons, FontAwesome } from "@expo/vector-icons"; // Import FontAwesome untuk ikon surat
import { useNavigation } from "@react-navigation/native";

const Daftar = () => {
  const navigation = useNavigation();
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  return (
    <ScrollView style={{ flex: 1, backgroundColor: "#fff" }}>
      <StatusBar backgroundColor={"#fff"} barStyle={"dark-content"} />

      <View style={{ flex: 1, backgroundColor: "#fff" }}>
        <View
          style={{
            backgroundColor: "#fff",
            paddingVertical: 20,
            paddingHorizontal: 10,
            flexDirection: "row",
            alignItems: "center",
          }}
        >
          {/* Tombol Kembali */}
          <TouchableOpacity
            onPress={() => navigation.navigate("AksesAkun")}
            style={{ width: 45, height: 45, marginRight: 13 }}
          >
            <Ionicons name="arrow-back" size={30} color="#000" />
          </TouchableOpacity>
        </View>

        <View style={{ justifyContent: "center", alignItems: "center" }}>
          <Image
            source={require("../assets/images/daftar.png")}
            style={{
              width: 300,
              height: 250,
              marginTop: 0,
              marginBottom: 10,
              marginLeft: 10,
              marginRight: 10,
            }}
          />
          <Text
            style={{
              color: "#000",
              fontWeight: "bold",
              fontSize: 30,
              textAlign: "left",
            }}
          >
            Haloo, Ecomapper,
          </Text>
          <Text
            style={{
              color: "#000",
              fontWeight: "bold",
              fontSize: 25,
              textAlign: "center",
            }}
          >
            Daftar Sekarang!
          </Text>
        </View>
      </View>

      <View style={styles.formContainer}>
        <Text style={styles.label}>Email</Text>
        <View style={styles.inputContainer}>
          <Ionicons name="mail" size={24} color="gray" style={styles.icon} />
          <TextInput
            style={styles.input}
            value={email}
            onChangeText={setEmail}
            placeholder="Masukkan email"
            keyboardType="email-address"
          />
        </View>

        <Text style={styles.label}>Nama</Text>
        <View style={styles.inputContainer}>
          <Ionicons name="person" size={24} color="gray" style={styles.icon} />
          <TextInput
            style={styles.input}
            value={name}
            onChangeText={setName}
            placeholder="Masukkan nama lengkap"
          />
        </View>

        <Text style={styles.label}>No HP</Text>
        <View style={styles.inputContainer}>
          <Ionicons name="call" size={24} color="gray" style={styles.icon} />
          <TextInput
            style={styles.input}
            value={phone}
            onChangeText={setPhone}
            placeholder="Masukkan nomor handphone"
            keyboardType="phone-pad"
          />
        </View>

        <Text style={styles.label}>Kata Sandi</Text>
        <View style={styles.passwordContainer}>
          <FontAwesome name="lock" size={24} color="gray" style={styles.icon} />
          <TextInput
            style={styles.passwordInput}
            value={password}
            onChangeText={setPassword}
            placeholder="Masukkan Kata Sandi"
            secureTextEntry={!showPassword}
          />
          <TouchableOpacity
            onPress={() => setShowPassword(!showPassword)}
            style={styles.eyeIcon}
          >
            <Ionicons
              name={showPassword ? "eye-off" : "eye"}
              size={24}
              color="gray"
            />
          </TouchableOpacity>
        </View>

        <Text style={styles.label}>Konfirmasi Kata Sandi</Text>
        <View style={styles.passwordContainer}>
          <FontAwesome name="lock" size={24} color="gray" style={styles.icon} />
          <TextInput
            style={styles.passwordInput}
            value={confirmPassword}
            onChangeText={setConfirmPassword}
            placeholder="Konfirmasi Kata Sandi"
            secureTextEntry={!showConfirmPassword}
          />
          <TouchableOpacity
            onPress={() => setShowConfirmPassword(!showConfirmPassword)}
            style={styles.eyeIcon}
          >
            <Ionicons
              name={showConfirmPassword ? "eye-off" : "eye"}
              size={24}
              color="gray"
            />
          </TouchableOpacity>
        </View>

        <TouchableOpacity
          style={styles.button}
          // onPress={() => console.log("Daftar Submit")}
          onPress={() => navigation.navigate("DaftarBerhasil")}
        >
          <Text style={styles.buttonText}>Daftar</Text>
        </TouchableOpacity>

        {/* "Masuk" Text */}
        <View style={styles.loginContainer}>
          <Text style={styles.loginText}>
            Sudah punya akun?{" "}
            <TouchableOpacity onPress={() => navigation.navigate("AksesAkun")}>
              <Text style={styles.loginLink}>Masuk</Text>
            </TouchableOpacity>
          </Text>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  formContainer: {
    paddingHorizontal: 30,
    marginTop: 30,
    marginBottom: 30,
  },
  label: {
    fontSize: 16,
    marginBottom: 10,
    color: "#333",
  },
  inputContainer: {
    flexDirection: "row",
    alignItems: "center",
    borderColor: "#ddd",
    borderWidth: 1,
    borderRadius: 5,
    marginBottom: 20,
  },
  input: {
    flex: 1,
    height: 45,
    paddingLeft: 10,
  },
  icon: {
    paddingLeft: 10,
  },
  passwordContainer: {
    flexDirection: "row",
    alignItems: "center",
    borderColor: "#ddd",
    height: 45,
    borderWidth: 1,
    borderRadius: 5,
    marginBottom: 20,
  },
  passwordInput: {
    flex: 1,
    height: 45,
    paddingLeft: 10,
  },
  eyeIcon: {
    paddingRight: 10,
  },
  button: {
    backgroundColor: "#2D572C",
    paddingVertical: 15,
    borderRadius: 5,
    marginTop: 20,
  },
  buttonText: {
    textAlign: "center",
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
  loginContainer: {
    marginTop: 15,
    alignItems: "center",
  },
  loginText: {
    fontSize: 16,
    color: "#333",
    marginBottom: 10,
  },
  loginLink: {
    color: "#2D572C",
    fontWeight: "bold",
    // marginBottom: 20,
  },
});

export default Daftar;