import React, {Component} from 'react';
import {Link} from "react-router-dom";

class RegWindow extends Component {
state = {
    login: '',
    email: '',
    password: '',
    passwordConfirm:'',
    loginValid: false,
    emailValid: false,
    passwordValid: false,
    passwordConfirmValid: false,
    submitDisable:true
};

onChangeHandler = (e)=> {
    this.setState({
        [e.target.name]: e.target.value
    })
};

onSubmit = ()=>{
    console.log('submit')
};

render(){
    let submitDisable = this.state.submitDisable;

    return(
        <div className="reg-window">
            <Link to='/' className="homeLink"><strong>ReactStore</strong></Link>
                <div className='input-div'>
                    <input name='login'
                        className='input-reg' type='text' maxLength='15'
                           required placeholder='Enter your login'
                           onChange={e => this.onChangeHandler(e)}
                           value={this.state.login}
                    />
                </div>
            <div className='input-error'>This login already in use by another user!</div>
            <div className='input-error'>Invalid login!</div>

                <div className='input-div'>
                    <input name='email'
                        className='input-reg' type='email' maxLength='20'
                           placeholder='Enter your email'
                           onChange={e => this.onChangeHandler(e)}
                           value={this.state.email}
                           />
                </div>
            <div className='input-error'>Invalid email!</div>

            <div className='input-div'>
                    <input name='password'
                        className='input-reg' type='password' maxLength='15'
                           placeholder='Enter your password'
                           onChange={e => this.onChangeHandler(e)}
                           value={this.state.password}
                           />
                </div>
            <div className='input-error'>Invalid password!</div>

            <div className='input-div'>
                <input name='passwordConfirm'
                    className='input-reg' type='password' maxLength='15'
                       placeholder='Enter your password again'
                       onChange={e => this.onChangeHandler(e)}
                       value={this.state.passwordConfirm}
                />
            </div>
            <div className='input-error'>Password mismatch!</div>

            <button className='submit-btn'
                    disabled={this.state.submitDisable}
                    onClick={this.onSubmit}
            ><strong>Sign up!</strong></button>
            <div><Link to='/auth' className="reg-auth-link">I already have an account</Link></div>
        </div>
    );
};
}

export {RegWindow};

state = {
    login: '',
    loginValid: false };

loginValidate = (e)=>{
    let regExp = /^[A-Za-z]+[A-Za-z0-9]+$/;
    this.setState({
        [e.target.name]: e.target.value,
        loginValid: regExp.test(e.target.value)
    });
};

onChange={e => this.loginValidate(e)}