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

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

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


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


// поля ввода и кнопки
function LoginForm() {
    const location = useLocation().pathname === '/';
    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 patternPassword = /(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])/g
    // регулярка для проверки логина на латинские символы и цифры
    const patternLogin = /^[a-zA-Z0-9]+$/
    // указываем минимальную длинну для нового пароля
    const passLength = 8;

    let isValidate, isCorrect, isLogin

    ((patternLogin.test(data.login))) || (isLogin = true);
    ((data.pass.length < passLength) || !(patternPassword.test(data.pass))) && (isValidate = true);
    (data.pass != data.confirmPass) && (isCorrect = true);

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


    // функция генерации случайного логина
    function generateRandomLogin() {
        const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
        const length = Math.floor(Math.random() * (10 - 5 + 1) + 5) // генерируем длину слова от 5 до 10 символов
        let word = ''
        for (let i = 0; i < length; i++) {
            word += characters[Math.floor(Math.random() * characters.length)] // выбираем случайный символ из списка доступных символов
        }
        return word
    }

    // генерируем новый пароль при клике на иконку
    function generateLogin() {
        const newLogin = generateRandomLogin()

        setData({ ...data, login: newLogin })

        // и проворачиваем иконку
        const rotate = document.getElementById('loginUpdate')
        rotate.classList.add('rotate');
        setTimeout(() => {
            rotate.classList.remove('rotate');
        }, 3000)
    }


    // включаем,выклюаем отображение пароля
    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();
    };


    // отрабатывание Tooltips при клике на логин
    const [openToolTipsLogin, setOpenToolTipsLogin] = React.useState(false);
    const handleTooltipCloseLogin = () => {
        setOpenToolTipsLogin(false);
    };
    const handleTooltipOpenLogin = () => {
        setOpenToolTipsLogin(true);
    };


    // отрабатывание Tooltips при клике на пароль
    const [openToolTipsPass, setOpenToolTipsPass] = React.useState(false);
    const handleTooltipClose = () => {
        setOpenToolTipsPass(false);
    };
    const handleTooltipOpen = () => {
        setOpenToolTipsPass(true);
    };


    // 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}>
                    <ClickAwayListener onClickAway={handleTooltipCloseLogin}>
                        <div>
                            <Tooltip
                                PopperProps={{
                                    disablePortal: true,
                                }}
                                onClose={handleTooltipClose}
                                open={openToolTipsLogin}
                                disableFocusListener
                                disableHoverListener
                                disableTouchListener
                                title={!location && 'Сгенерируйте или введите пароль (только латинские буквы и цифры)'}
                                arrow
                            >
                                {/* <TextField
                                    error={!location && isLogin}
                                    fullWidth
                                    variant='outlined'
                                    id='login'
                                    label='Логин'
                                    size='normal'
                                    value={data.login}
                                    onChange={e => setData({ ...data, login: e.target.value })}
                                    onClick={handleTooltipOpenLogin}
                                /> */}
                                <FormControl
                                    variant="outlined"
                                    onClick={handleTooltipOpenLogin}
                                >
                                    <InputLabel htmlFor="outlined-adornment-password">Логин</InputLabel>
                                    <OutlinedInput
                                        error={!location && isLogin}
                                        fullWidth
                                        id="login"
                                        label="Логин"
                                        size="normal"
                                        type='text'
                                        value={data.login}
                                        onChange={e => setData({ ...data, login: e.target.value })}

                                        endAdornment={
                                            <InputAdornment position="end">
                                                {!location && <IconButton
                                                    aria-label="login"
                                                    onClick={generateLogin}
                                                    edge="end"
                                                >
                                                    <Refresh id='loginUpdate' />
                                                </IconButton>}
                                                {location && <IconButton
                                                    aria-label="login"
                                                    edge="end"
                                                >
                                                    <Person />
                                                </IconButton>}
                                            </InputAdornment>
                                        }
                                    />
                                </FormControl>
                            </Tooltip>
                        </div>
                    </ClickAwayListener>

                    <ClickAwayListener onClickAway={handleTooltipClose}>
                        <div>
                            <Tooltip
                                PopperProps={{
                                    disablePortal: true,
                                }}
                                onClose={handleTooltipClose}
                                open={openToolTipsPass}
                                disableFocusListener
                                disableHoverListener
                                disableTouchListener
                                title={!location && 'Минимум 8 символов (большие и маленькие латинские буквы, цифры и спецсимволы)'}
                                arrow
                            >
                                <FormControl
                                    variant="outlined"
                                    onClick={handleTooltipOpen}
                                >
                                    <InputLabel htmlFor="outlined-adornment-password">Пароль</InputLabel>
                                    <OutlinedInput
                                        error={!location && 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>
                            </Tooltip>
                        </div>
                    </ClickAwayListener>


                    {!location && <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
                            ? (validation || false)
                            : (validation || isCorrect || isLogin) || false}
                        onClick={location ? fullLogin : fullRegistration}
                    >
                        {location
                            ? 'Войти' : 'Регистрация'}
                    </Button>
                </Stack>
            </form>

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

export default LoginForm