import { h, Component } from 'preact';

import store from '../store';

import { logout } from '../actions/user';
import { showLoginModal } from '../actions/ui';

export default class User extends Component {
  componentWillMount() {
    this.unsubscribe = store.subscribe(() => this.forceUpdate());
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const { user } = store.getState();

    return (user &&
      <div>
        <div>Logged in as {user.email}</div>
        <button onClick={() => store.dispatch(logout())}>Logout</button>
      </div> ||
      <div>
        <button onClick={() => store.dispatch(showLoginModal())}>Login</button>
      </div>);
  }
}