import {StackNavigationProp} from '@react-navigation/stack';
import React, {useState} from 'react';
import {Button, StyleSheet, Text} from 'react-native';
import {TextInput} from 'react-native-gesture-handler';
import {RootStackParamList} from '../App';

interface Props {
  navigation: StackNavigationProp<RootStackParamList, 'Home'>;
}

export default function Home(props: Props) {
  let [remoteAddress, setRemoteAddress] = useState('');
  return (
    <>
      {/* <Button
        title={'Start demo'}
        onPress={() => props.navigation.navigate('Deck')}
      /> */}
      <Text>Remote address:</Text>
      <TextInput
        style={style.textInput}
        autoCorrect={false}
        value={remoteAddress}
        onChangeText={(value) => setRemoteAddress(value)}
      />
      <Button
        title={'Connect'}
        onPress={() => {
          console.log('connect');
          props.navigation.navigate('Deck', {
            remoteAddress: remoteAddress,
          });
        }}
      />
    </>
  );
}

const style = StyleSheet.create({
  textInput: {
    borderColor: 'gray',
    borderWidth: 1,
  },
});