import { useState } from "react";
import { Text, View } from "react-native";
import PhoneInput, {
  isValidPhoneNumber,
} from "react-native-international-phone-number";
import "./../global.css";
import { Button } from "./components/ui/button";

export default function App() {
  const [selectedCountry, setSelectedCountry] = useState<any>(null);
  const [inputValue, setInputValue] = useState("");

  function handleInputValue(phoneNumber: any) {
    setInputValue(phoneNumber);
  }

  function handleSelectedCountry(country: any) {
    setSelectedCountry(country);
  }

  return (
    <View style={{ width: "100%", flex: 1, padding: 24 }}>
      <View className="bg-red-500 w-40 h-40"></View>
      <PhoneInput
        value={inputValue}
        onChangePhoneNumber={handleInputValue}
        selectedCountry={selectedCountry}
        onChangeSelectedCountry={handleSelectedCountry}
      />
      <Button
        variant={"destructive"}
        onPress={() => console.log("Button Pressed")}
      >
        <Text>asdasdasdas</Text>
      </Button>
      <View style={{ marginTop: 10 }}>
        <Text>
          Country:{" "}
          {`${selectedCountry?.name?.en} (${selectedCountry?.cca2})`}
        </Text>
        <Text>
          Phone Number: {`${selectedCountry?.callingCode} ${inputValue}`}
        </Text>
        <Text>
          isValid:{" "}
          {isValidPhoneNumber(inputValue, selectedCountry)
            ? "true"
            : "false"}
        </Text>
      </View>
    </View>
  );
}