import { store } from '../redux';
import { useState } from "react";
import { Link, Redirect, useHistory } from "react-router-dom";
import { actionFullLogin } from "../redux/action";

import { Paper, Box, Typography, Button, Stack, OutlinedInput, IconButton, InputLabel, InputAdornment, FormControl } from "@mui/material";

import { Visibility, VisibilityOff } from '@mui/icons-material';

// поля логин/пароль/кнопка входа
const LoginForm = ({ onLogin }) => {
    // отслеживаем введение данных в полях логин/пароль
    const [login, setLogin] = useState('')
    const [pass, setPass] = useState('')

    // включаем,выклюаем отображение пароля
    const [showPassword, setShowPassword] = useState(false);
    const handleClickShowPassword = () => setShowPassword((show) => !show);
    const handleMouseDownPassword = (event) => {
        event.preventDefault();
    };



    return (
        <Box sx={{ width: '100%' }}>
            <Stack spacing={2}>
                <FormControl variant="outlined">
                    <InputLabel htmlFor="outlined-adornment-password">Имя пользователя</InputLabel>
                    <OutlinedInput
                        id="login"
                        label="Имя пользователя"
                        type="text"
                        size="small"
                        value={login}
                        onChange={e => setLogin(e.target.value)}
                    />
                </FormControl>

                <FormControl variant="outlined">
                    <InputLabel htmlFor="outlined-adornment-password">Пароль</InputLabel>
                    <OutlinedInput
                        id="password"
                        label="Пароль"
                        size="small"
                        type={showPassword ? 'text' : 'password'}
                        value={pass}
                        onChange={e => setPass(e.target.value)}

                        endAdornment={
                            <InputAdornment position="end">
                                <IconButton
                                    aria-label="toggle password visibility"
                                    onClick={handleClickShowPassword}
                                    onMouseDown={handleMouseDownPassword}
                                    edge="end"
                                >
                                    {showPassword ? <VisibilityOff /> : <Visibility />}
                                </IconButton>
                            </InputAdornment>
                        }
                    />
                </FormControl>

                <Button
                    variant="contained"
                    disabled={((login == '') || (pass == '')) || false}
                    onClick={() => onLogin(login, pass)}
                >
                    Войти
                </Button>
            </Stack>
        </Box>
    )
}

// Вся страница формы
export default function Authorization() {
    const history = useHistory();

    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
                        onLogin={async (login, pass) => {
                            await store.dispatch(actionFullLogin(login, pass))

                            if ((Object.keys(store.getState().auth)).length) {
                                history.push('/')
                            }
                        }}
                    />
                </Box>


                <Typography
                    variant="subtitle1"
                    sx={{
                        display: 'grid',
                        alignSelf: 'end',
                        justifyContent: 'center',
                    }}>
                    <Link
                        color="inherit"
                        to='/registration'
                    >
                        Зарегистрироваться
                    </Link>
                </Typography>
            </Paper>
        </Box >
    )
}