import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { configure, observable } from 'mobx';
import Form from './common/Form';
//import {loginRequest} from '../actions'
interface Props {
    data?: any;
    dispatch?: any;
    history?: any;
    postStore?: any;
}
configure({ enforceActions: 'observed' });
@inject('postStore')
@observer
class Login extends Component<Props> {
    @observable username = '';
    @observable password = '';
    handleChange = (obj: any) => {
        if (obj.type === 'password') {
            this.password = obj.field;
        } else this.username = obj.field;
    };
    onSubmit = () => {
        console.log('here');
        this.props.postStore.Login(this.username, this.password);
    };
    render() {
        if (this.props.postStore.LogIn.success) {
            this.props.history.push('/');
        }
        return (
            <div className="form-page__wrapper">
                <div className="form-page__form-wrapper">
                    <div className="form-page__form-header">
                        <h2 className="form-page__form-heading">Login</h2>
                    </div>
                    <Form
                        data={{}}
                        onSubmit={this.onSubmit}
                        btnText={'Login'}
                        error={this.props.postStore.LogIn.error}
                        onChange={this.handleChange}
                        currentlySending={false}
                    />
                </div>
            </div>
        );
    }
}

// Which props do we want to inject, given the global state?

// Wrap the component to inject dispatch and state into it
export default Login;