import React from 'react';
import {connect} from 'react-redux';

import * as authAction from '../actions/auth';

class LoginPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            host: '127.0.0.1',
            port: 22,
            user: '',
            pass: ''
        };
    }

    render() {
        let errorMsg;
        if (this.props.err) {
            errorMsg = (<p className='text-danger'>{this.props.err}</p>);
        }

        let loginColClass = [
            'col-xs-12',
            'col-sm-10',
            'col-sm-offset-1',
            'col-md-8',
            'col-md-offset-2',
            'col-lg-6',
            'col-lg-offset-3'
        ];

        return (
            <div className='container'>
                <div className='row'>
                    <div className={loginColClass.join(' ')}>
                        <h1>Login</h1>
                        <hr/>
                        <form onSubmit={this.handleSubmit.bind(this)}>
                            <div className='form-group'>
                                <label htmlFor='host-input'>Host</label>
                                <input
                                    type='text'
                                    className='form-control'
                                    id='host-input'
                                    placeholder='Host name or IP address'
                                    value={this.state.host}
                                    onChange={this.handleHostChange.bind(this)}
                                />
                            </div>
                            <div className='form-group'>
                                <label htmlFor='port-input'>Port</label>
                                <input
                                    type='number'
                                    className='form-control'
                                    id='port-input'
                                    value={this.state.port}
                                    onChange={this.handlePortChange.bind(this)}
                                />
                            </div>
                            <div className='form-group'>
                                <label htmlFor='user-input'>User</label>
                                <input
                                    type='text'
                                    className='form-control'
                                    id='user-input'
                                    value={this.state.user}
                                    onChange={this.handleUserChange.bind(this)}
                                />
                            </div>
                            <div className='form-group'>
                                <label htmlFor='pass-input'>Password</label>
                                <input
                                    type='password'
                                    className='form-control'
                                    id='pass-input'
                                    value={this.state.pass}
                                    onChange={this.handlePassChange.bind(this)}
                                />
                            </div>
                            <div className='form-group'>
                                {errorMsg}
                                <button
                                    className='btn btn-lg btn-block btn-primary'
                                    type='submit'
                                    disabled={this.props.loginStatus === 'pending'}
                                >
                                    Login
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        );
    }

    handleHostChange(e) {
        this.setState({host: e.target.value});
    }
    handlePortChange(e) {
        this.setState({port: parseInt(e.target.value)});
    }
    handleUserChange(e) {
        this.setState({user: e.target.value});
    }
    handlePassChange(e) {
        this.setState({pass: e.target.value});
    }
    handleSubmit(e) {
        e.preventDefault();

        // todo validate input
        let host = this.state.host.trim();
        let port = this.state.port;
        let user = this.state.user.trim();
        let pass = this.state.pass.trim();

        let {dispatch} = this.props;
        dispatch(authAction.login({host, port, user, pass}));
    }

}

function mapStateToProps(state) {
    return state.auth;
}

export default connect(mapStateToProps)(LoginPage);