import * as React from "react";

import { Redirect } from "react-router";

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

import Scoreboard from "../components/scoreboard";

import { ILevel } from "../models/level";
import { ILearner } from "../models/learner";

interface IProps {
    nextLevel: () => ILevel;
    learners: ILearner[];
}

interface IState {
    toLevel: number;
}

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

        this.state = {
            toLevel: -1;
        };
    }

    render() {
        const small = window.matchMedia("(max-width: 700px)").matches;
        const direction = small ? "column" : "row";

        const level = this.props.nextLevel();

        return <div>
            {
                this.state.toLevel !== -1 ? (
                    <Redirect to={`/level/${this.state.toLevel}`} />
                ) : undefined
            }
            <Grid container direction={direction} spacing={16}>
                <Grid item lg={4}>
                    <Paper className="paper">
                        <Typography variant="title">{`Level ${level.level}`}</Typography>
                        <Typography variant="title" component="p">{level.name}</Typography>
                        <br />
                        <Typography component="p">
                            {level.desc}
                        </Typography>
                        <Button className="lesson-card-btn"
                            onClick={() => {
                                this.setState({
                                    toLevel: level.level,
                                });
                            }}>
                            Zum Level
                    </Button>
                    </Paper>
                </Grid>
                <Grid item lg={4}>
                    <Paper className="paper">
                        <Typography variant="title" component="p">
                            Rangliste: Top 10
                    </Typography>

                        <Scoreboard learners={this.props.learners.slice(0, 10)} />
                    </Paper>
                </Grid>
                <Grid item lg={4}>
                    <Paper className="paper">
                        Some stuff
                </Paper>
                </Grid>
            </Grid>
        </div>;
    }
};