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

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

import { StackParamsList } from '../types';
import { signMessage } from '../utils';

type SignProps = NativeStackScreenProps<StackParamsList, 'SignMessage'>;

const SignMessage = ({ route }: SignProps) => {
  const network = route.params?.selectedNetwork;

  const [message, setMessage] = useState<string>('');

  return (
    <View style={{ marginTop: 30, paddingHorizontal: 48 }}>
      <TextInput
        mode="outlined"
        placeholder="Enter your message"
        onChangeText={text => setMessage(text)}
        value={message}
      />
      <View style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
        <Button
          mode="contained"
          onPress={() => {
            network && signMessage(network, 0, message);
          }}>
          Sign
        </Button>
      </View>
    </View>
  );
};

export default SignMessage;