import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as LogonStore from '../store/LogonStore';

type LogonProps =
    LogonStore.LogonState
    & typeof LogonStore.actionCreators
    & RouteComponentProps<{}>;

class Logon extends React.Component<any, any> {
    public constructor(props) {
        super(props);
        this.state = { un: '', pw: '' };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        console.log(event.target.value); // works fine
        this.setState({ un: event.target.un, pw: event.target.pw });
        console.log(this.state); //first  un: '', pw: '' then un: undefined, pw: undefined
    }

    public render() {
        return <div >
            <h1>Logon</h1>
            <label>username</label><input value={this.state.un} onChange={this.handleChange} />
            <label>password</label><input value={this.state.pw} onChange={this.handleChange} />
            <br />
        </div>;
    }
}


export default connect(
    (state: ApplicationState) => state.logon, // Selects which state properties are merged into the component's props
    LogonStore.actionCreators                 // Selects which action creators are merged into the component's props
)(Logon) as typeof Logon;