waiting

import React from 'react';
import { Link } from 'react-router-dom'
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import makeStyles from "@material-ui/core/styles/makeStyles";
import {MAIN_URL} from "../constants"
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import {blue, pink} from "@material-ui/core/colors";
import CircularProgress from "@material-ui/core/CircularProgress";
import {Container} from "@material-ui/core";


const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
    },
    title: {
        marginLeft: theme.spacing(1),
        flexGrow: 1,
    },
    rating: {
        color: 'white',
        backgroundColor: 'transparent',

        '&:hover': {
            color: 'lightgreen',
            backgroundColor: 'transparent',
        },
    },
    userMenu: {
        padding: theme.spacing(2),
        '&:hover': {
            color: 'lightgreen',
        },
    },
    popover: {
        padding: theme.spacing(2),
    },
    paper: {
        marginRight: theme.spacing(5),
    },
    cards: {
        margin: theme.spacing(2),
        padding: theme.spacing(2),
        flexGrow: 1,
        minWidth: 200,
    },
    radio: {
        '&$checked': {
            color: "primary",
        },
    },
    option: {
        flexGrow: 1,
        height: 200,
    },
    startButton: {
        padding: theme.spacing(1),
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1),
        paddingLeft: theme.spacing(3),
        paddingRight: theme.spacing(3),
        marginTop: theme.spacing(1),
        marginBottom:theme.spacing(1),
        borderRadius: 100,
        fontSize: "large",
        '&:hover': {
            color: 'white',
            backgroundColor: pink[400],
        },
    },

    startButton1: {
        padding: theme.spacing(1),
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1),
        paddingLeft: theme.spacing(3),
        paddingRight: theme.spacing(3),
        marginTop: theme.spacing(1),
        marginBottom:theme.spacing(1),
        borderRadius: 100,
        fontSize: "large",
        '&:hover': {
            color: 'white',
            backgroundColor: blue[400],
        },
    },

    words: {
        fontSize: "large",
    },

    circle: {
        margin: theme.spacing(5),
    },

    startTitle: {
        margin: theme.spacing(2),
        padding: theme.spacing(2),
    },

    table: {
        margin: theme.spacing(7),
        padding: theme.spacing(2),
        backgroundColor: blue[50],
    }
}));


function WaitingPage() {
    const classes = useStyles();

    const redirectTimeout = setTimeout(function(){
        window.location.href="/stop-waiting/";
    }, 10 * 1000);

    React.useEffect(function() {
        return function cleanup() {
            clearTimeout(redirectTimeout)
        }
    });

    return (
        <div>
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="h6" className={classes.title}>
                        <Button component={Link} to={MAIN_URL.RATING} className={classes.rating}>
                            Рейтинг
                        </Button>
                    </Typography>

                </Toolbar>
            </AppBar>
            <Paper className={classes.table}>
                <Container
                    maxWidth={"xs"}
                >

                        <Paper className={classes.cards}>
                            <Grid container
                                  direction="column"
                                  justify="center"
                                  alignItems="center"
                                  className={classes.option}>
                                <Grid className={classes.words} key={0} item>
                                    Ожидаем соперника...
                                </Grid>
                                <Grid className={classes.circle} key={1} item>
                                    <CircularProgress color="secondary" />
                                </Grid>
                            </Grid>
                        </Paper>
                </Container>
                <Grid container
                      direction="row"
                      justify="space-evenly"
                      alignItems="center">
                    <Typography variant="h6" className={classes.startTitle}>
                        <Button variant="contained" color="secondary" size="large" component={Link}
                                to={MAIN_URL.START_GAME} className={classes.startButton}>
                            ОТМЕНИТЬ ПОИСК!
                        </Button>
                        <Button variant="contained" color="primary" size="large" component={Link}
                                to={MAIN_URL.GAME} className={classes.startButton1}>
                            ИГРАТЬ С БОТОМ!
                        </Button>
                    </Typography>
                </Grid>
            </Paper>
        </div>
    );
}

export default WaitingPage;