import React, { useState, useEffect } from 'react';
import { Alert, Button, View, Text, TextInput, TouchableWithoutFeedback, Keyboard } from "react-native";
import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';

// This code is beginning of Auth Implementation - actual implementation will differ and involve more UI
// Does not have a restart or proper handling of code confirmation, should only be used for obtaining token/testing
// Currently working for Android builds, iOS has open issue #56
 
export default function Login() {
  const [phoneNumber, setPhoneNumber] = useState<string>('');
  const [code, setCode] = useState<string>('');

  const [user, setUser] = useState(null);
  const [confirm, setConfirm] = useState<FirebaseAuthTypes.ConfirmationResult | null>(null);

  async function onAuthStateChanged(user: any) {
    setUser(user);
    if (user) {
      // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
      const token = await auth().currentUser?.getIdToken();
      // To debug/check token & user return, use these logs
      // console.log(token) // token log
      // console.log(user) // user log
    }
  }

  async function signInWithPhoneNumber(phoneNumber: string) {
    if (!phoneNumber) {
      return Alert.alert('Please enter a valid phone number with a country code');
    }
    try {
      const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
      setConfirm(confirmation);
    } catch (err) {
      // TODO: implement more robust error handling by parsing err message
      console.warn(err)
      Alert.alert(
        'There was an error. Make sure you are using a country code (ex: +1 for US)'
      );
    }
  }

  async function confirmCode() {
    try {
      await confirm?.confirm(code);
    } catch {
      Alert.alert('Invalid code, please try again.');
    }
  }

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber;
  }, []);



  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <View style={{ alignItems: 'center' }}>
        <TextInput
          style={{ width: '50%', height: 30, borderWidth: 1, borderColor: 'black', marginBottom: 20 }}
          placeholder="Phone"
          textContentType="telephoneNumber"
          keyboardType="phone-pad"
          autoCapitalize="none"
          value={phoneNumber}
          onChangeText={(value) => setPhoneNumber(value)}
        />
        {confirm && (
          <TextInput
            style={{ width: '50%', height: 30, borderWidth: 1, borderColor: 'black',  marginBottom: 20 }}
            placeholder="Code"
            keyboardType="number-pad"
            textContentType="oneTimeCode"
            autoCapitalize="none"
            value={code}
            onChangeText={(value) => setCode(value)}
          />
          )}
        <Button
          title={ !confirm ? "Receive code" : "Confirm code"}
          onPress={() => !confirm ? signInWithPhoneNumber(phoneNumber) : confirmCode()}
        />
        {user && (
          <>
            <Text style={{ marginTop: 10 }}>Display name: {user?.displayName}</Text>
            <Text>Phone number: {user?.phoneNumber}</Text>
          </>
        )}
      </View>
    </TouchableWithoutFeedback>
  )
}