import {Component} from "react";
import {Backdrop, Box, Button, CircularProgress, Fade, Modal, Stack, Typography} from "@mui/material";


interface WiFiState {
    open: boolean,
}

export default class WiFi extends Component<{}, WiFiState> {
    constructor(props: {}) {
        super(props);
        this.state = {
            open: false,
        };
    }

    componentDidMount() {
        setTimeout( () => this.setState({open: true}), 500);
    }

    style = {
        position: 'absolute' as 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        width: 400,
        bgcolor: 'background.paper',
        border: '2px solid #000',
        boxShadow: 24,
        p: 4,
    };

    handleClose = () => this.setState((prevState) => ({
        ...prevState,
        open: false
    }));

    render() {
        return <Modal
            aria-labelledby="transition-modal-title"
            aria-describedby="transition-modal-description"
            open={this.state.open}
            onClose={null}
            closeAfterTransition
            slots={{backdrop: Backdrop}}
            slotProps={{
                backdrop: {
                    timeout: 500,
                },
            }}
        >
            <Fade in={this.state.open}>
                <Box sx={this.style}>
                    <Typography id="transition-modal-title" variant="h6" component="h2">
                        WiFi Verbindungsmanager
                    </Typography>
                    <Typography id="transition-modal-description" sx={{mt: 2}}>
                        Folgende Netzwerke wurden gefunden...
                        <br/>
                        <i>Dafür wird eine WiFi-Verbindung hergestellt</i>
                        <br/>
                        <br/>
                        <Button variant="contained" onClick={() => null}>Ja</Button>
                        <Button variant="contained" onClick={() => null}
                                color="error">Nein</Button>
                    </Typography>
                </Box>
            </Fade>
        </Modal>
    }

}