import {Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField} from "@mui/material";
import * as React from 'react';

export default function Prompt({open, setOpen}) {

    const handleEnterClose = (e) => {
        if (e.key === 'Enter') {
            handleClose();
        }
    }
    const handleClose = () => {
        // @ts-ignore
        const passphrase = ""+document.getElementById("passphrase").value;
        sessionStorage.setItem("key", passphrase);
        setOpen(passphrase);
    };

    return (
        <div>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>Hey ! Si c'est bien toi, donne moi la clef !</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        Avant de pouvoir lire ou écrire, il faut ouvrir ton carnet avec la clef.
                    </DialogContentText>
                    <TextField
                        autoFocus
                        margin="dense"
                        id="passphrase"
                        label="Passphrase"
                        type="password"
                        fullWidth
                        variant="standard"
                        onKeyPress={handleEnterClose}
                    />
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose}>Tourner la clef</Button>
                </DialogActions>
            </Dialog>
        </div>
    );
};