import { useState } from 'react';
import { StyleSheet, Text, View, SafeAreaView, Alert, TextInput, Button, Modal, TouchableOpacity, Platform, ToastAndroid } from 'react-native';


export default function App() {

  const [showModal, setShowModal] = useState(false);
  const [response, setResponse] = useState(null);
  const [name, setName] = useState("");

  const fetchApi = async () => { 
    try {
      const res = await fetch(`https://api.agify.io?name=${name}`);
      const data = await res.json();

      if (!data.age) {
        Alert.alert("No Prediction Found", "Unable to predict age for this name.");
        return;
      }

      setResponse(data);
      if (Platform.OS === "android") {
        ToastAndroid.show("Prediction was found!", ToastAndroid.SHORT);
      } else {
        Alert.alert("Prediction Found");
      }
      setShowModal(true);
      
    } catch (e) {
      Alert.alert("error", e);
    }
  }

  const hadleGetAge = () => {
    if (!name.trim()) {
      Alert.alert("Validation error", "Enter a name");
      return;
    }

    Alert.alert("Confirm", `Fetch age prediction for "${name}"`, [{text:"Cancel", style:"cancel"}, {text: "Ok", onPress: fetchApi}]);
  } 

  return (
    
      Predict Your Age

      

      

      

      
        
          
            {response && (
              
                Age Prediction

                
                  Name: {response.name}
                  Age: {response.age}
                  Count: {response.count}
                
              
            )}

             setShowModal(false)}
              style={styles.closeButton}
            >
              Close
            
          
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  input: {
    width: "80%",
    padding: 12,
    borderWidth: 1,
    borderRadius: 6,
    marginBottom: 12,
    fontSize: 16,
  },
  modalContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  modalContent: {
    width: "80%",
    backgroundColor: "white",
    padding: 20,
    borderRadius: 10,
    elevation: 10,
  },
  modalTitle: {
    fontSize: 22,
    fontWeight: "bold",
    marginBottom: 15,
  },
  modalText: {
    fontSize: 18,
    marginVertical: 4,
  },
  closeButton: {
    backgroundColor: "#2196F3",
    marginTop: 20,
    paddingVertical: 12,
    borderRadius: 8,
  },
  closeButtonText: {
    color: "white",
    textAlign: "center",
    fontSize: 18,
    fontWeight: "600",
  },
  lable: {
    fontWeight: 700,
    paddingBottom: 65,
    fontSize: 30,
  }
});