import React from "react";
import { View, Text, TextInput, Button } from "react-native";
import { IRootState } from "../store";
import { login } from "../auth/thunks";
import { connect } from 'react-redux';

interface ILoginState{
    username:string,
    password:string
}

interface ILoginProps{
    login: (username:string,password:string)=> any
}

class LoginScreen extends React.Component<ILoginProps,ILoginState> {
    constructor(props:ILoginProps){
        super(props);
        this.state = {
            username:"",
            password:""
        }
    }

    private onChangeUsername = ( text:string) => {
      this.setState({
          username:text
      });
    }

    private onChangePassword = ( text:string) => {
        this.setState({
            password:text
        });
    }

    private onLoginPressed = () => {
      this.props.login(this.state.username, this.state.password)
    }

    public render() {
      return (
        <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
          <View>
            <Text>Username</Text>
            <TextInput
                value={this.state.username}
                onChangeText= {(text)=>this.onChangeUsername(text)}
                placeholder="Type in Username" />
          </View>
          <View>
            <Text>Password</Text>
            <TextInput
                value={this.state.password}
                secureTextEntry={true}
                onChangeText= {(text)=>this.onChangePassword(text)}
                placeholder="Type in Password" />
          </View>
          <Button title="Login" onPress={this.onLoginPressed} />
        </View>
      )
    }
}


const mapStateToProps = (state:IRootState)=>({});

const mapDispatchToProps = (dispatch:any)=>({
    login: (username:string,password:string)=>dispatch(login(username,password))
})

export default connect(mapStateToProps,mapDispatchToProps)(LoginScreen)