import * as React from "react";

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 { ILesson } from "../models/lesson";
import { ILearner } from "../models/learner";

interface IProps {
    lessons: ILesson[];
    learners: ILearner[];
}

export default class Dashboard extends React.Component<{}> {
    render() {
        const small = window.matchMedia("(max-width: 700px)").matches;
        const direction = small ? "column" : "row";

        return <Grid container direction={direction} spacing={16}>
            <Grid item lg={4}>
                <Paper className="paper">
                    N&auml;chstes Level
                </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>;
    }
};