import { TextField, Typography, IconButton, InputAdornment, Grid, Button } from "@mui/material"
import { Visibility, VisibilityOff } from '@mui/icons-material';
import { useState } from "react"
import { actionFullRegister } from "../actions/actionLogin";
import { connect } from "react-redux";


function RegisterPage ({onRegister}) {

    const [values, setValues] = useState({
        login: '',
        firstPassword: '',
        secondPassword: '',
        nickname: '',
        showPassword: ''
    })

    const [errorLogin, setErrorLogin] = useState(false);
    const [errorPass, setErrorPass] = useState(false);

    const handleChange = (prop) => (e) => {
        setValues({...values, [prop] : e.target.value})
    }

    const handleClickShowPassword = () => {
        setValues({
            ...values, showPassword : !values.showPassword
        })
    }

    return (
        <div className="RegisterPage">
            <form className="Form" noValidate autoComplete="off">
                    <Typography sx={{mb: '20px'}} variant='h4'>Регистрация</Typography>
                    <TextField 
                        error={errorLogin}
                        sx={{width: '100%', mb: '30px'}} 
                        required  
                        label="Логин" 
                        variant="outlined" 
                        helperText="минимум 3" 
                        value={values.login}
                        autoFocus
                        onChange={handleChange('login')}
                    />
                    <TextField
                        sx={{width: '100%', mb: '30px'}}
                        label="Ник"
                        variant="outlined"
                        value={values.nickname}
                        autoFocus
                        onChange={handleChange('nickname')}
                    />

                    <TextField
                        error={errorPass}
                        sx={{width: '100%'}}
                        helperText="минимум 3" 
                        required  
                        variant="outlined" 
                        label="Пароль"
                        type={'password'}
                        value={values.firstPassword}
                        onChange={handleChange('firstPassword')}
                        
                    />
                    <TextField
                        error={errorPass}
                        sx={{width: '100%'}}
                        helperText="минимум 3" 
                        required  
                        variant="outlined" 
                        label="Повторите пароль"
                        type={'password'}
                        value={values.secondPassword}
                        onChange={handleChange('secondPassword')}
                    />
            <Button                        //проверять payload чтобы понимать зарегался пользователь или имя уже существует
                onClick={
                    () => {
                            onRegister(values.login, values.firstPassword, values.nickname);
                    }
                } 
                sx={{width: '200px', mt: '30px'}} 
                variant="contained">
                    Войти
            </Button>
                
                
                
                
            </form>
        </div>
    )
}

export default connect(null, {onRegister: actionFullRegister})(RegisterPage)