class FormsDemo 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 FormsDemo extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            formErrors: {},
            formValues: {
                username: '',
                email: '',
                password: '',
                gender: '',
                bio: ''
            }
        };
    }
    
    componentWillMount() {
        this.initValidation();
    }
    
    onFormChange = (key, event) => {
        var valueUpd = {};
        valueUpd[key] = {$set: event.target.value};
        var errorUpd = this.validateField(key, event.target.value);
        this.setState(React.addons.update(this.state, { formValues: valueUpd, formErrors: errorUpd }));
    }
    
    render() {
        var now=new Date();
        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="success"
                    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>
        );
    }
    
    // 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) => {
        var invalid = false;
        if (this.validationSettings[key]!== undefined) {
            for(var i = 0; i < this.validationSettings[key].length; i++) { // interate on validators
                var validator = this.validationSettings[key][i];
                invalid = invalid || validator.call(this, value);
            }
        }
        var errorUpd = {};
        errorUpd[key] = {$set: invalid};
        return errorUpd;
    }
    
    validateAllFields = () => {
        var errorsUpd = {},
            allValid = true;
        for (var key in this.state.formValues) {
            errorsUpd[key] = this.validateField(key, this.state.formValues[key])[key];
            allValid = allValid && !errorsUpd[key].$set;
        }
        
        if (allValid) {
            this.refs.success.instance.show();
        }
        
        this.setState(React.addons.update(this.state, {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 FormsDemo extends React.Component {
    render() {
        return (
            <div>
                <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>
            </div>
        );
    }    
}

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

        this.state = {
            username: '',
            email: '',
            password: '',
            nameValid: true,
            nameError: '',
            emailValid: true,
            emailError: '',
            passValid: true,
            passError: ''
        };
    }
    
    changeUsername = (event) => {
        var username = event.target.value,
            valid = true,
            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) => {
        var email = event.target.value,
            valid = true,
            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) => {
        var pass = event.target.value,
            valid = true,
            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) => {
        var nameEntered = !!this.state.username, 
            emailEntered = !!this.state.email, 
            passEntered = !!this.state.password;
        this.setState({
            nameValid: nameEntered && this.state.nameValid,
            nameError: nameEntered ? this.state.nameError : 'This field is required',
            emailValid: emailEntered && this.state.emailValid,
            emailError: emailEntered ? this.state.emailError : 'This field is required',
            passValid: passEntered && this.state.passValid,
            passError: passEntered ? this.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 FormsDemo 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) => {
        var 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) => {
        var 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) => {
        event.preventDefault();
        this.setState({
            signup: this.state.isLogin ? "Don't have an account yet? Sign up." : "Already have an account?",
            btnText: this.state.isLogin ? "Sign in" : "Sign up",
            isLogin: !this.state.isLogin
        });
    }
    
    password = (event) => {
        event.preventDefault();
    }
    
    submit = (event) => {
        event.preventDefault();
        if (this.state.submitted && this.state.emailValid && this.state.passValid) {
            mobiscroll.toast({ message: (this.state.isLogin ? 'Login' : 'Signup') + ' success!'});
        } else {
            var emailInvalid = this.validateEmail(this.state.email);
            var passInvalid = this.validatePass(this.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>
        );
    }    
}