import * as React from 'react';
import {
    useHistory,
    useLocation
} from "react-router-dom";

import LoginForm from './login_form';

import {
    Paper,
    Box,
    Typography
} from "@mui/material";



// ссылка на страницу регистрации
function RegistrationLink() {
    const history = useHistory()

    return (
        <Typography
            variant="subtitle1"
            sx={{
                display: 'grid',
                alignSelf: 'end',
                justifyContent: 'center',
                cursor: 'pointer'
            }
            }
            onClick={() => {
                history.push('/registration')
            }}
        >
            Зарегистрироваться
        </Typography >

    )
}


// Основное окно регистрации (без полей ввода и кнопок)
function AuthReg() {
    let location = useLocation().pathname === '/'

    return (
        <Box sx={{
            display: 'grid',
            height: '80vh',
            justifyContent: 'center',
            alignItems: 'center'
        }}>
            <Paper elevation={3}
                sx={{
                    padding: '5px',
                    width: '400px',
                    height: '500px',
                    display: 'grid',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                <Typography
                    variant="h4"
                    noWrap
                    sx={{
                        display: 'grid',
                        fontFamily: 'monospace',
                        fontWeight: 700,
                        letterSpacing: '.3rem',
                        color: 'inherit',
                        textDecoration: 'none',
                        flexGrow: '1',
                        marginTop: '20px',
                        justifyContent: 'center'
                    }} >
                    Hipstagram
                </Typography>

                <Box
                    sx={{
                        display: 'grid',
                        alignSelf: 'start'
                    }}>
                    <LoginForm />
                </Box>

                {location && <RegistrationLink />}
            </Paper>
        </Box >
    )
}

export default AuthReg