import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import Fade from '@material-ui/core/Fade';


function rand() {
    return Math.round(Math.random() * 20) - 10;
}

function getModalStyle() {
    const top = 50 + rand();
    const left = 50 + rand();

    return {
        top: `${top}%`,
        left: `${left}%`,
        transform: `translate(-${top}%, -${left}%)`,
    };
}

const useStyles = makeStyles((theme) => ({
    paper: {
        position: 'absolute',
        width: 400,
        backgroundColor: theme.palette.background.paper,
        border: '2px solid #000',
        boxShadow: theme.shadows[5],
        padding: theme.spacing(2, 4, 3),
    },
}));

export default function SimpleModal() {
    const classes = useStyles();
    // getModalStyle is not a pure function, we roll the style only on the first render
    const [modalStyle] = React.useState(getModalStyle);
    const [open, setOpen] = React.useState(false);

    const handleOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    /*
    return ( <
        div >
        <
        button type = "button"
        onClick = { handleOpen } >
        Open Modal <
        /button> <
        Modal open = { open }
        onClose = { handleClose } >
        <
        div style = { modalStyle }
        className = { classes.paper } > 123 < /div>< /
        Modal > < /
        div >
    );
    */
    return ( <
        div >
        <
        button type = "button"
        onClick = { handleOpen } >
        Open Modal <
        /button> <
        Modal open = { open }
        onClose = { handleClose } >
        <
        div >
        <
        Fade in = { open } >
        <
        div > 123 < SimpleModal / > < /div>

        <
        /Fade> < /
        div > < /
        Modal > < /
        div >
    );
}