import React from "react";
import { Container, Grid, Typography, Button, Card } from "@material-ui/core";
import Counter from "../general/Counter";
import { useDispatch } from "react-redux";
import { push } from "connected-react-router";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
    gridContainer: {
        margin: theme.spacing(2, 0),
    },
    secondPageCard: {
        margin: theme.spacing(2, 0),
        padding: theme.spacing(2),
        border: `1px solid ${theme.gsc.navy}`,
    },
}));

const SecondPage = () => {
    const classes = useStyles();
    const dispatch = useDispatch();
    return (
        <Container maxWidth="xl" className={classes.gridContainer}>
            <Grid container direction="column" justify="center" alignItems="flex-start">
                <Typography variant="h4" component="h2">
                    Second Page
                </Typography>
                <Card variant="outlined" className={classes.secondPageCard}>
                    <Typography variant="body1">
                        This content is on a card. The counter below stores its state in Redux. The state is persisted.
                    </Typography>
                    <Counter />
                    <Button variant="contained" color="primary" onClick={() => dispatch(push("/anotherpage"))}>
                        Navigate to Another Page
                    </Button>
                </Card>
            </Grid>
        </Container>
    );
};

export default SecondPage;