import * as React from "react";

import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import SummaryTable from "../components/SummaryTable";

import { Redirect } from "react-router-dom";

import { IReviewMetadata } from "../models/review";

interface IProps {
    reviewMeta: () => IReviewMetadata;
}

interface IState {
    toDashboard: boolean;
}

export default class SummaryPage extends React.Component<IProps, IState> {
    constructor(props: any) {
        super(props);

        this.state = {
            toDashboard: false,
        };
    }

    render() {
        return <div>
            {
                this.state.toDashboard ? (
                    <Redirect to="/dashboard" />
                ) : undefined
            }
            <Grid
                container
                spacing={0}
                direction="column"
                alignItems="center"
                justify="center"
                style={{ minHeight: '100vh' }}>
                <Grid item xs={12}>
                    <Paper className="paper">
                        <Typography variant="title">Zusammenfassung</Typography>
                        <Grid container direction="column">
                            <SummaryTable reviewMeta={this.props.reviewMeta} />
                            <Button onClick={() => this.setState({
                                toDashboard: true,
                            })}>
                                Zum Dashboard
                            </Button>
                        </Grid>
                    </Paper>
                </Grid>
            </Grid>
        </div>;
    }
}