import React from 'react';
import {Button, Card, Dialog, Text, TouchableOpacity} from 'react-native-ui-lib';
import QRCode from 'react-native-qrcode-svg';
import {PanningDirectionsEnum} from "react-native-ui-lib/src/components/panningViews/panningProvider";
import Ionicons from "@expo/vector-icons/Ionicons";

const UserMenu = ({
                      userId,
                      showQRCodeDialog,
                      setShowQRCodeDialog
                  }: {
    userId: string,
    showQRCodeDialog: boolean,
    setShowQRCodeDialog: (value: string | boolean) => void
}) => {
    const handleShowQRCode = () => {
        setShowQRCodeDialog(userId);
    };


    return (
        <>
            <TouchableOpacity
                onPress={handleShowQRCode}
            >
                <Ionicons name="qr-code-outline" size={24} color="black"/>
            </TouchableOpacity>

            <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;