import React from 'react';
import styleConstants from '../../styleConstants';
import { Paper, Button, Typography } from '@material-ui/core';
import { Formik, Form } from 'formik';
import { Field } from 'formik';
import { TextField } from 'formik-material-ui';
import appConstants from '../../appConstants';

export default () => {
    return (
        <main css={{ width: '100vw', height: '100vh', ...styleConstants.centered }}>
            <Paper css={{ width: 480, padding: 32 }}>
                <Formik
                    render={(props) => (
                        <Form style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                            <Typography variant={'h5'}>Sign in to {appConstants.title}</Typography>
                            <Field
                                variant={'outlined'}
                                margin="normal"
                                name={'email'}
                                label={'Email'}
                                fullWidth
                                component={TextField}
                            />
                            <Field
                                variant={'outlined'}
                                margin="normal"
                                type={'password'}
                                name={'password'}
                                label={'Password'}
                                fullWidth
                                component={TextField}
                            />
                            <Button css={{marginTop: 24}} color={'primary'} variant={'contained'}>
                                Sign in
                            </Button>
                        </Form>
                    )}
                />
            </Paper>
        </main>
    );
};