import React from 'react';
import {StoreWatchComponent} from 'frill-core';
import {canUseDOM} from 'react/lib/ExecutionEnvironment';
import {Link, RouteHandler} from 'react-router';
// import jwtDecode from 'jwt-decode';

/**
 * App component - wraps up all pages
 * @extends {FrillCore.StoreWatchComponent}
 * @example <caption>Usage in React-Router</caption>
 * <Route handler={C.App}>
 *   ...
 * </Route>
 */
class AppComponent extends new StoreWatchComponent(['Auth']) {

  /**
   * Constructor
   */
  constructor(props) {
    super(props);

    /**
     * Name of component
     */
    this.name = 'App';

    if (this.props && this.props.token) {
      this.getFrill().action('requestAuth').authenticate(this.props.token);
      this.state = this.getInitialStateFromFrill();
    }

    if (canUseDOM) {
      // clear up initial-data from dom
      document.getElementById('initial-data').outerHTML = '';
    }
  }

  getInitialStateFromFrill() {
    super.getInitialStateFromFrill();
  }

  getStateFromFrill() {
    return {
      isLoggedIn: this.getFrill().store('Auth').isLoggedIn(),
      user: this.getFrill().store('Auth').user,
    };
  }

  /**
   * render
   * @return {React DOM}
   * @see https://facebook.github.io/react/docs/component-specs.html#render
   */
  render() {
    let isLoggedIn;
    if (this.state && this.state.isLoggedIn) {
      isLoggedIn = this.state.isLoggedIn;
    } else {
      isLoggedIn = false;
    }

    let message;
    if (isLoggedIn) {
      message = `Hello, ${this.state.user.user.displayName}`;
    } else {
      message = 'Welcome, Guest';
    }

    return (
      <div className="App">
        <header>
          <h1>
            <img src="/images/frill-logo-white.png" />Welcome to frill!
          </h1>
        </header>
        <nav>
          <ul>
            <li><Link to="top">Top page</Link></li>
            <li><Link to="login">Login Sample</Link></li>
            <li>
              <a href="http://localhost:3000/auth/twitter/login">
                Twitter Auth Example
              </a>
            </li>
          </ul>
        </nav>
        <p className="welcome">
          {message}
        </p>
        <RouteHandler {...this.props}/>
        <footer>
          <p>frill</p>
        </footer>
      </div>
    );
  }
}

/**
 * Exports AppComponent
 */
export default AppComponent;