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 Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Paper from "@material-ui/core/Paper";
import CircularProgress from "@material-ui/core/CircularProgress";

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

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

interface IProps {
    getLevels: () => Promise<ILevel[]>;

    setLevels: (levels: ILevel[]) => void;
    setLoading: (state: boolean) => void;
    loading: boolean;
    levels: ILevel[];
}

export default class Dashboard extends React.Component<IProps> {
    componentDidMount() {
        this.props.setLoading(true);

        // Fetch the levels
        this.props.getLevels().then(res => {
            this.props.setLevels(res);
            this.props.setLoading(false);
        });
    }

    render() {
        if (this.props.loading) {
            return <div>
                <Grid
                    container
                    spacing={0}
                    direction="column"
                    alignItems="center"
                    justify="center"
                    style={{ minHeight: '100vh' }}>
                    <Grid item xs={12}>
                        <Paper className="paper">
                            <Grid container direction="column" spacing={8}>
                                <CircularProgress />
                            </Grid>
                        </Paper>
                    </Grid>
                </Grid>
            </div>;
        }

        const small = window.matchMedia("(max-width: 700px)").matches;
        const cName = small ? "lesson-card-xs" : "lesson-card-lg";

        let key = 0;
        const levelToCard = (level: ILevel) => {
            return <Grid item key={key++}>
                <Card style={{
                    width: small ? window.width - 32 : "300px"
                }}>
                    <CardContent className={cName}>
                        <Typography variant="title">{`Level ${level.level}`}</Typography>
                        <Typography variant="title" component="p">{level.name}</Typography>
                        <br />
                        <Typography component="p">
                            {level.description}
                        </Typography>
                    </CardContent>
                    <CardActions>
                        <Button
                            component={Link}
                            to={`/level/${level.level}`}
                            className="lesson-card-btn">
                            Zum Level
                        </Button>
                    </CardActions>
                </Card>
            </Grid>;
        };

        return <Grid container spacing={16} direction="row">
            {this.props.levels.map(levelToCard)}
        </Grid>
    }
};