import React, {
    forwardRef,
    useState
} from 'react';
import { store } from '../redux';
import {
    useHistory,
    useLocation
} from "react-router-dom";
import { actionFullLogin, actionFullRegistration } from "../redux/action";

import {
    useDispatch,
    useSelector
} from 'react-redux';

import {
    Dialog,
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
    Paper,
    Box,
    Typography,
    Button,
    Stack,
    OutlinedInput,
    IconButton,
    InputLabel,
    InputAdornment,
    FormControl,
    TextField,
    Slide
} from "@mui/material";

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


// анимация появление модального окна
const Transition = forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
})


// поля ввода и кнопки
function LoginForm() {
    const location = useLocation();
    const history = useHistory();

    // отслеживаем введение данных в полях логин/пароль
    const [data, setData] = useState({ login: '', pass: '', confirmPass: '' })
    console.log('data: ', data)

    //  модальное окно открытие/закрытие
    const [open, setOpen] = useState(false);
    const openModalAlertWindow = () => {
        setOpen(true);
    }
    const closeModalAlertWindow = () => {
        setOpen(false);
    }

    // регулярка для проверки нового пароля
    const pattern = /(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])/g
    // указываем минимальную длинну для нового пароля
    const passLength = 8;

    let isValidate, isCorrect;

    ((data.pass.length < passLength) || !(pattern.test(data.pass))) && (isValidate = true);
    (data.pass != data.confirmPass) && (isCorrect = true);

    const validation = (data.login == '') || (data.pass == '')


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

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


    // Thunk регистрация
    async function fullRegistration() {
        const token = await store.dispatch(actionFullRegistration(data.login, data.confirmPass))

        if (token !== null) {
            history.push('/')
        } else {
            openModalAlertWindow()
        }
    }

    // Thunk логинизация
    async function fullLogin() {
        const token = await store.dispatch(actionFullLogin(data.login, data.pass))

        if (token == null) {
            openModalAlertWindow()
        }
    }


    return (
        <Box sx={{ width: '100%' }}>
            <form>
                <Stack spacing={2}>
                    <TextField
                        fullWidth
                        variant='outlined'
                        id='login'
                        label='Логин'
                        size='normal'
                        value={data.login}
                        onChange={e => setData({ ...data, login: e.target.value })}
                    />

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

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

                    {(location.pathname === '/registration') && <FormControl variant="outlined">
                        <InputLabel htmlFor="outlined-adornment-password">Подтвердите пароль</InputLabel>
                        <OutlinedInput
                            error={isCorrect}
                            fullWidth
                            id="confirmPassword"
                            label="Подтвердите пароль"
                            size="normal"
                            type={showPasswordConfirm ? 'text' : 'password'}
                            value={data.confirmPass}
                            onChange={e => setData({ ...data, confirmPass: e.target.value })}

                            endAdornment={
                                <InputAdornment position="end">
                                    <IconButton
                                        aria-label="visibility"
                                        onClick={handleClickShowPasswordConfirm}
                                        onMouseDown={handleMouseDownPasswordConfirm}
                                        edge="end"
                                    >
                                        {showPasswordConfirm ? <VisibilityOff /> : <Visibility />}
                                    </IconButton>
                                </InputAdornment>
                            }
                        />
                    </FormControl>}

                    <Button
                        size="large"
                        variant="contained"
                        disabled={location.pathname === '/' ?
                            (validation || false) :
                            (validation || isCorrect) || false}
                        onClick={location.pathname === '/' ? fullLogin : fullRegistration}
                    >
                        {location.pathname === '/'
                            ? 'Войти' : 'Регистрация'}
                    </Button>
                </Stack>
            </form>

            <div>
                <Dialog
                    open={open}
                    onClose={closeModalAlertWindow}
                    TransitionComponent={Transition}
                // keepMounted // всегда держит компонент смонтированным в DOM
                >
                    <DialogTitle>Что-то пошло не так!</DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            {
                                location.pathname === '/'
                                    ? 'Вы ввели неправильный логин или пароль. Повторите попытку.'
                                    : 'Введенные логин и/или пароль уже зарегистрированы'
                            }
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={closeModalAlertWindow}>Ок</Button>
                    </DialogActions>
                </Dialog>
            </div>
        </Box>
    )
}


// действия при нажатии по ссылке на регистрацию
function RegistrationLink() {
    const history = useHistory()

    function goToRegistration() {
        history.push('/registration')
    }

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


// Основное окно регистрации (без полей ввода и кнопок)
function AuthReg() {

    let location = useLocation();

    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.pathname === '/') && <RegistrationLink />}
            </Paper>
        </Box >
    )
}

export default AuthReg