import * as React from "react";

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

import { IVocab, ReviewMode } from "../models/vocab";

interface IProps {
    levelId: number;
    vocabByLevel: (level: number) => IVocab[];
}

interface IState {
    input: string;
    current: number;
}

export default class ReviewPage extends React.Component<IProps> {
    private vocab: IVocab[] = [];
    constructor(props: any) {
        super(props);

        this.state = {
            input: "",
            current: 0,
        };

        const { vocabByLevel, levelId } = this.props;
        this.vocab = vocabByLevel(levelId);

        this.currentVocab = this.currentVocab.bind(this);
    }

    currentVocab() {
        return this.vocab[this.state.current];
    }

    checkInput = () => {
        const current = this.currentVocab();

        // Check if the user's answer was correct
        // TODO: Levensthein-Distance?
        if (this.state.input === current.german) {
            // TODO: Show it's correct
            console.log("Hell yeah");

            // Show the next vocab word
            if (this.state.current + 1 >= this.vocab.length) {
                // TODO: Go to a summary screen
            } else {
                // Increase the vocab
                this.setState({
                    current: this.state.current + 1,
                });
            }
        } else {
            // TODO: Show it's wrong
            console.log("Hell no");
        }

        // TODO: Show a snackbar for showing the updated score
    }

    render() {
        return <div style={{ margin: 12 }}>
            <Grid container justify="center">
                <Grid item>
                    <Card>
                        <Grid container direction="column">
                            <h1>
                                {this.vocab[this.state.current].latin}
                            </h1>
                            <TextField
                                value={this.state.input}
                                onChange={(ev) => this.setState({
                                    input: ev.target.value,
                                })} />
                            <Button onClick={this.checkInput}>
                                Prüfen
                            </Button>
                        </Grid>
                    </Card>
                </Grid>
            </Grid>
        </div>;
    }
};