import React from "react";
import { Page } from "@/pages/base";
import { Button, Container, Typography } from "@material-ui/core";
import { StudentActions, useDispatch } from "@/state/actions";
import { sampleStudent } from "@/provider/dummy";
import { useHistory } from "react-router-dom";
import { route } from "@/routing";
import { useVerticalSpacing } from "@/styles";

export const UserLoginPage = () => {
    const dispatch = useDispatch();
    const history  = useHistory();

    const handleSampleLogin = () => {
        dispatch({
            type: StudentActions.Login,
            student: sampleStudent,
        })

        history.push(route("home"));
    }

    const classes = useVerticalSpacing(3);

    return <Page>
        <Page.Header maxWidth="md">
            <Page.Title>Tu miało być przekierowanie do logowania PG...</Page.Title>
        </Page.Header>
        <Container maxWidth="md" className={ classes.root }>
            <Typography variant="h3">... ale wciąż czekamy na dostęp :(</Typography>

            <Button fullWidth onClick={ handleSampleLogin } variant="contained" color="primary">Zaloguj jako przykładowy student</Button>
        </Container>
    </Page>;
}