// child component

class LoginForm extends Component {
    constructor(props) {
      super(props);
  
      this.onChangeUsername = this.onChangeUsername.bind(this);
      this.onChangePassword = this.onChangePassword.bind(this);
      this.onSubmit = this.onSubmit.bind(this);
  
      this.state = { 
        username: '',
        password: '',
        authenticated: false,
      };
    }
    onChangeUsername = (e) => {
      this.setState({username: e.target.value});
    };
  
    onChangePassword = (e) => {
      this.setState({password: e.target.value});
    };
  
    onSubmit(e) {
      const params = {
        username: this.state.username,
        password: this.state.password
      };
	  // This is where you need to put your data to pass to the parent. Notice it's a prop. You pass whatever you want to the parent 
      which you set here in the child
      this.props.callbackFromParent(params);
      e.preventDefault();
    };


// parent component
class Login extends Component {
    constructor(props) {
        super(props);
    
        this.state = { 
          username: '',
          password: '',
          authenticated: false,
          loginData: {},
          status: 200,
        };
    }
    componentDidMount() {
        fetch('/users/authenticated')
        .then(res => res.text())
        .then(
          (res) => {
            if(res === 'true') {
              this.setState({authenticated: true});
            } else {
              this.setState({authenticated: false, loginData: {} });
            }
          }
        )
        .catch(err => console.log(err));
      }

    // callback function to loginFrom child component
    parentCallback = async (dataFromChild) => {
        await this.setState({ loginData: dataFromChild});
        // Axios.post('/users/test', this.state.loginData).then((data) => {
        //   console.log(data);
        // }).catch(err => console.log(err));
        Axios.post('/users/login', this.state.loginData).then((data) => {
            data.status === 200 ? this.setState({ status: 200, authenticated: true }) : console.log('Unauthorized');
        }).catch((err) => {
            err ? this.setState({ status: 401, authenticated: false }) : console.log('No errors');
        });
    }

    render() {
        const { authenticated } = this.state;
        const { status } = this.state;

        if(authenticated === true) {
            return(
                <div>
                    <Redirect to="/income"/>
                </div>
            )
        } else {
            return status === 401 ? <div className="App"><LoginForm callbackFromParent={this.parentCallback}/><br/><span className="errorMessage">Username and password do not match.<br/>Please try again.</span></div> : <div className="App"><LoginForm callbackFromParent={this.parentCallback}/></div>;
        }
    }

}
export default Login