import React, { useState } from 'react';
import { View } from 'react-native';
import { Button, TextInput } from 'react-native-paper';

import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native';

import { web3WalletPair } from '../utils/wallet-connect/WalletConnectUtils';
import styles from '../styles/stylesheet';
import { StackParamsList } from '../types';

const WalletConnect = () => {
  const [currentWCURI, setCurrentWCURI] = useState<string>('');

  const navigation =
    useNavigation<NativeStackNavigationProp<StackParamsList>>();

  const pair = async () => {
    const pairing = await web3WalletPair({ uri: currentWCURI });
    navigation.navigate('Laconic');
    return pairing;
  };

  return (
    <View style={styles.appContainer}>
      <TextInput
        mode="outlined"
        onChangeText={setCurrentWCURI}
        value={currentWCURI}
        placeholder="Enter WalletConnect URI"
      />

      <View style={styles.signButton}>
        <Button mode="contained" onPress={pair}>
          Pair Session
        </Button>
      </View>
    </View>
  );
};

export default WalletConnect;