import { useStytch } from '@stytch/react-native';
import React, { useCallback, useEffect, useState } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

export const RemoveRegistration = () => {
  const stytch = useStytch();

  const [isBiometricsAvailable, setIsBiometricsAvailable] = useState(false);

  useEffect(() => {
    const checkBiometricsAvailability = async () => {
      if (stytch) {
        try {
          const available = await stytch.biometrics.isRegistrationAvailable();
          setIsBiometricsAvailable(available);
        } catch {
          setIsBiometricsAvailable(false);
        }
      } else {
        setIsBiometricsAvailable(false);
      }
    };

    checkBiometricsAvailability();
  }, [stytch]);

  const removeBiometricsRegistration = useCallback(() => {
    stytch.biometrics.removeRegistration();
  }, [stytch]);

  return isBiometricsAvailable ? (
    <View>
      <TouchableOpacity onPress={removeBiometricsRegistration}>
        <Text>Delete Biometric Factor</Text>
      </TouchableOpacity>
    </View>
  ) : null;
};