import React, {useState} from 'react';
import {Button, Card, Colors, Dialog, Hint, ListItem, Text, View} from 'react-native-ui-lib';
import QRCode from 'react-native-qrcode-svg';
import {PanningDirectionsEnum} from "react-native-ui-lib/src/components/panningViews/panningProvider";

const UserMenu = ({userId}:{userId: string}) => {
    const [showHint, setShowHint] = useState(false);
    const [showQRCodeDialog, setShowQRCodeDialog] = useState(false);

    const handleShowQRCode = () => {
        setShowHint(false);
        setTimeout(() => {
            setShowQRCodeDialog(true);
        }, 500)
    };

    return (
        <>
            <Hint
                onBackgroundPress={() => setShowHint(false)}
                onPress={() => setShowHint(true)}
                color={Colors.white}
                customContent={
                    <View height={18}>
                        <ListItem
                            onPress={handleShowQRCode}
                        >
                            <Text>Show Login QR Code</Text>
                        </ListItem>
                    </View>
                }
                enableShadow
                visible={showHint}
                backdropColor="transparent"
            >
                <View>
                    <Button link onPress={() => setShowHint(x => !x)}>
                        <Text>...</Text>
                    </Button>
                </View>
            </Hint>

            <Dialog
                visible={showQRCodeDialog}
                onDismiss={() => setShowQRCodeDialog(false)}
                panDirection={PanningDirectionsEnum.DOWN}
            >
                <Card padding-20 center>
                    <Text marginB-10>Scan this QR Code to Login:</Text>
                    <QRCode value={userId} size={150} />
                    <Button
                        marginT-20
                        label="Close"
                        onPress={() => setShowQRCodeDialog(false)}
                    />
                </Card>
            </Dialog>
        </>
    );
};

export default UserMenu;