import React, { useState } from 'react';
import {
    Box, Heading, Center, Button,
    NativeBaseProvider, Text, Input, FormControl, Stack
} from "native-base";
import QRCode from 'react-native-qrcode-svg';

// import { StyleSheet, View, Dimensions } from 'react-native';

export default function QrGenerator({ navigation }) {

    const [input, setInput] = useState("name");

    const handleChange = (text) => {
        setInput(text);
    }

    return (
        <NativeBaseProvider>
            <Center mt="20">

                <Heading color="#0891b2">VCard Generator</Heading>

                <Box marginTop="5">
                    <QRCode value={input + "\n"} size={170} /> {/* Here is the QRCode from react-native-qrcode-svg */}
                </Box>
            </Center>

            <Box mt="5" width="90%" margin="auto" >

                <Text fontSize="md">Fill below parameters to generate your QR Code</Text>

                <FormControl>
                    <Stack>
                        <FormControl.Label >Text</FormControl.Label>
                        <Input placeholder='Enter Text' onChangeText={text => handleChange(text)} />
                    </Stack>
                </FormControl>

                <Button mt="5">Download QR</Button>
            </Box>
        </NativeBaseProvider>
    )
}