class App extends React.Component {
    render() {
        return (
            <mobiscroll.Form theme="" lang="">
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>User Data</mobiscroll.FormGroupTitle>
                    <mobiscroll.Input placeholder="First Name">First Name</mobiscroll.Input>
                    <mobiscroll.Input placeholder="Last Name">Last Name</mobiscroll.Input>
                    <mobiscroll.Input placeholder="User Name">User Name</mobiscroll.Input>
                    <mobiscroll.Input placeholder="Company Name">Company</mobiscroll.Input>
                    <mobiscroll.Input placeholder="Email Address">Email</mobiscroll.Input>
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Phone Number</mobiscroll.FormGroupTitle>
                    <mobiscroll.Input placeholder="Home">Home</mobiscroll.Input>
                    <mobiscroll.Input placeholder="Business">Business</mobiscroll.Input>
                    <mobiscroll.Input placeholder="Fax">Fax</mobiscroll.Input>
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }    
}

mobiscroll.settings = {
    theme: '',
    lang: ''
};

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            formErrors: {},
            formValues: {
                username: '',
                email: '',
                password: '',
                gender: '',
                bio: ''
            }
        };
    }
    
    componentWillMount() {
        this.initValidation();
    }
    
    onFormChange = (key, event) => {
        const valueUpd = Object.assign({}, this.state.formValues); 
        valueUpd[key] = event.target.value;
        const errorUpd = this.validateField(key, event.target.value);
        
        this.setState({
            formValues: valueUpd,
            formErrors: errorUpd
        });
    }
    
    render() {
        return (
            <div>
                <mobiscroll.Form noValidate={true}>
                    <mobiscroll.FormGroup>
                        <mobiscroll.FormGroupTitle>Sign Up</mobiscroll.FormGroupTitle>
                        <mobiscroll.Input 
                            value={this.state.formValues.username} 
                            onChange={this.onFormChange.bind(this, "username")}
                            valid={!this.state.formErrors.username}
                            errorMessage={this.state.formErrors.username}
                            placeholder="Username"
                            icon="user4" />
                        
                        <mobiscroll.Input
                            type="email"
                            value={this.state.formValues.email}
                            onChange={this.onFormChange.bind(this, 'email')}
                            valid={!this.state.formErrors.email}
                            errorMessage={this.state.formErrors.email}
                            placeholder="Email"
                            icon="ion-ios7-email" />
    
                        <mobiscroll.Input
                            type="password"
                            value={this.state.formValues.password} 
                            onChange={this.onFormChange.bind(this, "password")}
                            valid={!this.state.formErrors.password}
                            errorMessage={this.state.formErrors.password}
                            placeholder="Password"
                            icon="lock2"
                            passwordToggle={true} />
    
                        <mobiscroll.Dropdown
                            value={this.state.formValues.gender}
                            onChange={this.onFormChange.bind(this, "gender")}
                            valid={!this.state.formErrors.gender}
                            errorMessage={this.state.formErrors.gender}
                            icon="user4">
                                <option value="">Please select</option>
                                <option value="female">Female</option>
                                <option value="male">Male</option>
                        </mobiscroll.Dropdown>

                        <mobiscroll.Textarea
                            value={this.state.formValues.bio}
                            onChange={this.onFormChange.bind(this, "bio")}
                            valid={!this.state.formErrors.bio}
                            errorMessage={this.state.formErrors.bio}
                            placeholder="About me"
                            icon="line-note" />
                    </mobiscroll.FormGroup>
                    
                    <mobiscroll.FormGroup className="mbsc-btn-group-block">
                        <mobiscroll.Button onClick={this.validateAllFields} icon="checkmark">Sign Up</mobiscroll.Button>
                    </mobiscroll.FormGroup>
                </mobiscroll.Form>

                <mobiscroll.Popup 
                    ref={this.setRef}
                    focusOnClose={false}
                    buttons={[{
                        text: 'Log in',
                        handler: 'set'
                    }]}
                    >
                    <h3>Thank you for registering</h3>
                    <p>You have successfully signed up as a user!</p>
                </mobiscroll.Popup>
            </div>
        );
    }

    setRef = (comp) => {
        this.success = comp;
    }

    // set up validation
    initValidation = () => {
        this.validationSettings = {
            username: [this.requiredCheck, this.minlengthCheck.bind(this, 2)],
            email: [this.requiredCheck, this.emailCheck],
            password: [this.requiredCheck, this.minlengthCheck.bind(this, 6)],
            gender: [this.requiredCheck],
            bio: [this.requiredCheck, this.minlengthCheck.bind(this, 20)],
        }
    }

    // validation
    validateField = (key, value) => {
        let invalid = false;
        if (this.validationSettings[key] !== undefined) {
            for(let i = 0; i < this.validationSettings[key].length; i++) { // interate on validators
                const validator = this.validationSettings[key][i];
                invalid = invalid || validator.call(this, value);
            }
        }
        let errorUpd = {};
        errorUpd[key] = invalid;
        return errorUpd;
    }
    
    validateAllFields = () => {
        const errorsUpd = Object.assign({}, this.state.formErrors); 
        const values = Object.assign({}, this.state.formValues); 
        let allValid = true;
        for (let key in values) {
            errorsUpd[key] = this.validateField(key, values[key])[key];
            allValid = allValid && !errorsUpd[key];
        }
        
        if (allValid) {
            this.success.instance.show();
        }
        
        this.setState({
            formErrors: errorsUpd
        });
    }
    
    // validation check functions
    requiredCheck = (value) => {
        if (!!value) {
            return false;
        } else {
            return 'This field is required';
        }
    }
    
    minlengthCheck = (minlength, value) => {
        if (!value || value.length < minlength) {
            return 'It should be at least ' + minlength + ' characters long';
        }
        else {
            return false;
        }
    }
    
    emailCheck = (value) => {
        if (/^\w+@\w+\.\w{2,3}$/.test(value)) {
            return false;
        } else {
            return 'This is not a valid email';
        }
    }
}

class App extends React.Component {
    render() {
        return (
            <mobiscroll.Form 
                theme=""
                lang=""
                className="md-create-account"
            >
                <div className="md-chart-pic"></div>

                <div className="md-cac-title mbsc-padding">
                    <h4>Great news, your traffic <br /> is already being tracked</h4>
                    <h4>Continue by creating a new account</h4>
                </div>
                <div className="md-cac-cont">
                    <mobiscroll.FormGroup inset>
                        <mobiscroll.Input name="username" placeholder="Name" />
                        <mobiscroll.Input name="email" type="email" placeholder="Email address" />
                        <mobiscroll.Input name="password" type="password" placeholder="Password" passwordToggle={true} />
                    </mobiscroll.FormGroup>
                    <mobiscroll.FormGroup inset className="md-cac-btn">
                        <mobiscroll.Button block={true}>Create account</mobiscroll.Button>
                        <mobiscroll.Button block={true} flat={true}>I'll do it later</mobiscroll.Button>
                    </mobiscroll.FormGroup>
                </div>
            </mobiscroll.Form>
        );
    }    
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            username: '',
            email: '',
            password: '',
            nameValid: true,
            nameError: '',
            emailValid: true,
            emailError: '',
            passValid: true,
            passError: ''
        };
    }
    
    changeUsername = (event) => {
        let username = event.target.value;
        let valid = true;
        let error = '';
        
        if (!username) {
            username = '';
            valid = false;
            error = 'This field is required';
        } else if (username.length < 4) {
            valid = false;
            error = 'Please enter at leaset 4 characters';
        }

        this.setState({
            username: username,
            nameValid: valid,
            nameError: error
        });
    }
    
    changeEmail = (event) => {
        let email = event.target.value;
        let valid = true;
        let error: '';
        
        if (!email) {
            email = '';
            valid = false;
            error = 'This field is required';
        } else if (!/^[a-z0-9]+@[a-z]+$/.test(email)) {
            valid = false;
            error = 'Please provide a valid email address';
        }
        this.setState({
            email: email,
            emailValid: valid,
            emailError: error
        });
    }
    
    changePassword = (event) => {
        let pass = event.target.value;
        let valid = true;
        let error: '';
        
        if (!pass) {
            email = '';
            valid = false;
            error = 'This field is required';
        } else if (pass.length < 6) {
            valid = false;
            error = 'Password should be at least 6 characters';
        }
        this.setState({
            password: pass,
            passValid: valid,
            passError: error
        });
    }
    
    validate = (event) => {
        const state = this.state;
        const nameEntered = !!state.username;
        const emailEntered = !!state.email;
        const passEntered = !!state.password;
        
        this.setState({
            nameValid: nameEntered && state.nameValid,
            nameError: nameEntered ? state.nameError : 'This field is required',
            emailValid: emailEntered && state.emailValid,
            emailError: emailEntered ? state.emailError : 'This field is required',
            passValid: passEntered && state.passValid,
            passError: passEntered ? state.passError : 'This field is required'
        }); 
    }
    
    render() {
        return (
            <mobiscroll.Form theme="" lang="" className="md-signup-rules" noValidate={true}>
                <mobiscroll.FormGroup inset>
                    <mobiscroll.FormGroupTitle className="md-signup-title">Sign Up</mobiscroll.FormGroupTitle>
                    <mobiscroll.Input 
                        value={this.state.username} 
                        onChange={this.changeUsername}
                        error={!this.state.nameValid}
                        errorMessage={this.state.nameError}
                        placeholder="Name"
                        name="username" />
                        
                    <mobiscroll.Input 
                        type="email"
                        value={this.state.email}
                        onChange={this.changeEmail}
                        error={!this.state.emailValid}
                        errorMessage={this.state.emailError}
                        placeholder="Email"
                        name="email" />

                    <mobiscroll.Input
                        type="password"
                        value={this.state.password}
                        onChange={this.changePassword}
                        error={!this.state.passValid}
                        errorMessage={this.state.passError}
                        passwordToggle={true}
                        placeholder="Password"
                        name="password" />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup inset>
                    <div className="mbsc-padding">
                        <h6 className="mbsc-desc">Use lowercase and uppercase characters </h6>
                        <h6 className="mbsc-desc">Length of password should be at least 6 characters</h6>
                    </div>
                    <mobiscroll.FormGroup>
                        <mobiscroll.Button block={true} onClick={this.validate}>Sign Up</mobiscroll.Button>
                    </mobiscroll.FormGroup>
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }    
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isLogin: false,
            btnText: 'Sign in',
            signup: "Don't have an account yet? Sign up.",
            email: '',
            emailValid: true,
            emailError: '',
            pass: '',
            passValid: true,
            passError: '',
            submitted: false
        };
    }
    
    emailChange = (event) => {
        const invalid = this.validateEmail(event.target.value);
        this.setState({
            email: event.target.value,
            emailValid: !this.state.submitted || !invalid,
            emailError: invalid || ''
        });
    }
    
    validateEmail = (email) => {
        if (email) {
            if (/[a-z]+@[a-z]+\.[a-z]+/.test(email)) {
                return null;
            } else {
                return "Invalid email";
            }
        } else {
            return "Email required";
        }
    }
    
    passChange = (event) => {
        const invalid = this.validatePass(event.target.value);
        this.setState({
            pass: event.target.value,
            passValid: !this.state.submitted || !invalid,
            passError: invalid || ''
        });
    }
    
    validatePass = (pass) => {
        if (pass) {
            if (pass.length < 6) {
                return 'At least 6 characters required';
            } else {
                return null;
            }
        } else {
            return 'Password required';
        }
    }
    
    signUp = (event) => {
        const login = this.state.isLogin;
        event.preventDefault();
        this.setState({
            signup: login ? "Don't have an account yet? Sign up." : "Already have an account?",
            btnText: login ? "Sign in" : "Sign up",
            isLogin: !login
        });
    }
    
    password = (event) => {
        event.preventDefault();
    }
    
    submit = (event) => {
        const state = this.state;
        event.preventDefault();
        if (state.submitted && state.emailValid && state.passValid) {
            mobiscroll.toast({ message: (state.isLogin ? 'Login' : 'Signup') + ' success!'});
        } else {
            const emailInvalid = this.validateEmail(state.email);
            const passInvalid = this.validatePass(state.pass);
            this.setState({
                submitted: true,
                emailValid: !emailInvalid,
                emailError: emailInvalid || '',
                passValid: !passInvalid,
                passError: passInvalid || ''
            });
        }
    }
    
    render() {
        return (
            <mobiscroll.Form 
                theme=""
                lang=""
                className="md-login-form" 
                action="/login" 
                method='POST'
                onSubmit={this.submit}
                novalidate
            >
                <div className="md-logo micons icon-mbsc-logo"></div>
                <mobiscroll.FormGroup inset>
                    <mobiscroll.Input type="email" name="Email" placeholder="Email" value={this.state.email} onChange={this.emailChange} valid={this.state.emailValid} errorMessage={this.state.emailError} />
                    <mobiscroll.Input type="password" name="Password" placeholder="Password" passwordToggle={true} icon="none" iconAlign="right" value={this.state.pass} onChange={this.passChange} valid={this.state.passValid} errorMessage={this.state.passError} />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup inset className="mbsc-padding mbsc-align-center">
                    <a href="#" onClick={this.signUp}>{this.state.signup}</a>
                    <br/><br/>
                    <a href="#" onClick={this.password}>Forgot password?</a>
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup inset className="mbsc-padding">
                    <mobiscroll.Button type="submit" block={true}>{this.state.btnText}</mobiscroll.Button>
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }    
}