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


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>
    )
}

class Authorization extends React.Component {

    state = {
        redirectToReferrer: false
    }
    login = () => {
        this.setState(() => ({
            redirectToReferrer: true
        }))
    }
    render() {
        const { from } = this.props.location.state || { from: { pathname: '/' } }
        const { redirectToReferrer } = this.state

        if (redirectToReferrer === true) {
            return <Redirect to={from} />
        }

        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))

                                this.login()
                            }}
                            onClick={() => { console.log('click on login') }}

                        />
                    </Box>

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

export default Authorization