import Component from 'flarum/Component';
import ItemList from 'flarum/utils/ItemList';
import affixSidebar from 'flarum/utils/affixSidebar';
import UserCard from 'flarum/components/UserCard';
import LoadingIndicator from 'flarum/components/LoadingIndicator';
import SelectDropdown from 'flarum/components/SelectDropdown';
import LinkButton from 'flarum/components/LinkButton';
import Separator from 'flarum/components/Separator';
import listItems from 'flarum/helpers/listItems';

/**
 * The `UserPage` component shows a user's profile. It can be extended to show
 * content inside of the content area. See `ActivityPage` and `SettingsPage` for
 * examples.
 *
 * @abstract
 */
export default class UserPage extends Component {
  constructor(...args) {
    super(...args);

    /**
     * The user this page is for.
     *
     * @type {User}
     */
    this.user = null;

    app.history.push('user');
    app.current = this;
    app.drawer.hide();
    app.modal.close();
  }

  view() {
    return (
      <div className="UserPage">
        {this.user ? [
          UserCard.component({
            user: this.user,
            className: 'Hero UserHero',
            editable: this.user.canEdit(),
            controlsButtonClassName: 'Button'
          }),
          <div className="container">
            <nav className="sideNav UserPage-nav" config={affixSidebar}>
              <ul>{listItems(this.sidebarItems().toArray())}</ul>
            </nav>
            <div className="sideNavOffset UserPage-content">
              {this.content()}
            </div>
          </div>
        ] : [
          LoadingIndicator.component({className: 'LoadingIndicator--block'})
        ]}
      </div>
    );
  }

  config(isInitialized, context) {
    if (isInitialized) return;

    $('#app').addClass('App--user');
    context.onunload = () => $('#app').removeClass('App--user');
  }

  /**
   * Get the content to display in the user page.
   *
   * @return {VirtualElement}
   */
  content() {
  }

  /**
   * Initialize the component with a user, and trigger the loading of their
   * activity feed.
   *
   * @param {User} user
   * @protected
   */
  init(user) {
    this.user = user;

    app.setTitle(user.username());
  }

  /**
   * Given a username, load the user's profile from the store, or make a request
   * if we don't have it yet. Then initialize the profile page with that user.
   *
   * @param {String} username
   */
  loadUser(username) {
    const lowercaseUsername = username.toLowerCase();

    app.store.all('users').some(user => {
      if (user.username().toLowerCase() === lowercaseUsername && user.joinTime()) {
        this.init(user);
        return true;
      }
    });

    if (!this.user) {
      app.store.find('users', username).then(this.init.bind(this));
    }
  }

  /**
   * Build an item list for the content of the sidebar.
   *
   * @return {ItemList}
   */
  sidebarItems() {
    const items = new ItemList();

    items.add('nav',
      SelectDropdown.component({
        children: this.navItems().toArray(),
        className: 'App-titleControl',
        buttonClassName: 'Button'
      })
    );

    return items;
  }

  /**
   * Build an item list for the navigation in the sidebar.
   *
   * @return {ItemList}
   */
  navItems() {
    const items = new ItemList();
    const user = this.user;

    items.add('activity',
      LinkButton.component({
        href: app.route('user.activity', {username: user.username()}),
        children: app.trans('core.activity'),
        icon: 'user'
      })
    );

    items.add('discussions',
      LinkButton.component({
        href: app.route('user.discussions', {username: user.username()}),
        children: [app.trans('core.discussions'), <span className="Button-badge">{user.discussionsCount()}</span>],
        icon: 'reorder'
      })
    );

    items.add('posts',
      LinkButton.component({
        href: app.route('user.posts', {username: user.username()}),
        children: [app.trans('core.posts'), <span className="Button-badge">{user.commentsCount()}</span>],
        icon: 'comment-o'
      })
    );

    if (app.session.user === user) {
      items.add('separator', Separator.component());
      items.add('settings',
        LinkButton.component({
          href: app.route('settings'),
          children: app.trans('core.settings'),
          icon: 'cog'
        })
      );
    }

    return items;
  }
}