import * as React from "react";

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

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 SummaryTable from "../components/SummaryTable";

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

interface IProps {
    nextLevel: () => ILevel;
    getLastReview: () => IReviewMetadata;
    getTopTen: () => ILearner[];
}

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

        const level = this.props.nextLevel();

        return <div>
            <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
                            component={Link}
                            to={`/level/${level.level}`}
                            className="lesson-card-btn">
                            Zum Level
                    </Button>
                    </Paper>
                </Grid>
                <Grid item lg={4}>
                    <Paper className="paper">
                        <Typography variant="title" component="p">
                            Rangliste: Top 10
                    </Typography>

                        <Scoreboard topTen={this.props.getTopTen()} />
                    </Paper>
                </Grid>
                <Grid item lg={4}>
                    <Paper className="paper">
                        <Typography variant="title">
                            Letzte Wiederholung
                        </Typography>
                        <SummaryTable reviewMeta={this.props.getLastReview} />
                    </Paper>
                </Grid>
            </Grid>
        </div>;
    }
};