import React from 'react';
import { AUTH_TOKEN, USER } from '../constants';

const AuthContext = React.createContext();

class AuthProvider extends React.Component {
  constructor() {
    super();
    this.state = {
      authToken: '',
      user: {}
    };
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.setState.bind(this);
  }

  login(token, user) {
    // console log shows
    console.log('Auth Context Login running...', token, user);
    // this code doesn't seem to run???? No errors
    this.setState({ authToken: token, user: user }, () => {
      console.log('after update provider.. ', this.state);
      localStorage.setItem(AUTH_TOKEN, token);
      localStorage.setItem(USER, user);
    });
  }
  logout() {
    console.log('Auth Context Logout running...');
    localStorage.removeItem(AUTH_TOKEN);
    localStorage.removeItem(USER);
    this.setState({ authToken: '', user: {} });
  }

  componentDidMount() {
    this.setState({
      authToken: JSON.parse(localStorage.getItem(AUTH_TOKEN)),
      user: JSON.parse(localStorage.getItem(USER))
    });
  }
  render() {
    return (
      <AuthContext.Provider
        value={{
          authToken: this.state.authToken,
          user: this.state.user,
          login: this.login,
          logout: this.logout
        }}
      >
        {this.props.children}
      </AuthContext.Provider>
    );
  }
}

const AuthConsumer = AuthContext.Consumer;

export { AuthProvider, AuthConsumer };