import React from 'react';
import mixpanel from 'utils/Mixpanel';

import MyProfileActions from 'actions/MyProfileActions';
import LoginActionCreators from 'actions/LoginActionCreators';

import AvatarItem from 'components/common/AvatarItem.react';
import MyProfileModal from 'components/modals/MyProfile.react';
import ActorClient from 'utils/ActorClient';

import classNames from 'classnames';

var getStateFromStores = () => {
  return {dialogInfo: null};
};

class HeaderSection extends React.Component {
  componentWillMount() {
    ActorClient.bindUser(ActorClient.getUid(), this.setUser);
  }

  constructor() {
    super();

    this.setUser = this.setUser.bind(this);
    this.toggleHeaderMenu = this.toggleHeaderMenu.bind(this);
    this.openMyProfile = this.openMyProfile.bind(this);
    this.setLogout = this.setLogout.bind(this);

    this.state = getStateFromStores();
  }

  setUser(user) {
    this.setState({user: user});
  }

  toggleHeaderMenu() {
    mixpanel.track('Open sidebar menu');
    this.setState({isOpened: !this.state.isOpened});
  }

  setLogout() {
    LoginActionCreators.setLoggedOut();
  }

  render() {
    var user = this.state.user;

    if (user) {

      var headerClass = classNames('sidebar__header', 'sidebar__header--clickable', {
        'sidebar__header--opened': this.state.isOpened
      });

      return (
        <header className={headerClass}>
          <div className="sidebar__header__user row" onClick={this.toggleHeaderMenu}>
            <AvatarItem image={user.avatar}
                        placeholder={user.placeholder}
                        size="small"
                        title={user.name} />
            <span className="sidebar__header__user__name col-xs">{user.name}</span>
            <span className="sidebar__header__user__expand">
              <i className="material-icons">keyboard_arrow_down</i>
            </span>
          </div>
          <ul className="sidebar__header__menu">
            <li className="sidebar__header__menu__item" onClick={this.openMyProfile}>
              <i className="material-icons">person</i>
              <span>Profile</span>
            </li>
            {/*
            <li className="sidebar__header__menu__item" onClick={this.openCreateGroup}>
              <i className="material-icons">group_add</i>
              <span>Create group</span>
            </li>
             */}
            <li className="sidebar__header__menu__item hide">
              <i className="material-icons">cached</i>
              <span>Integrations</span>
            </li>
            <li className="sidebar__header__menu__item hide">
              <i className="material-icons">settings</i>
              <span>Settings</span>
            </li>
            <li className="sidebar__header__menu__item hide">
              <i className="material-icons">help</i>
              <span>Help</span>
            </li>
            <li className="sidebar__header__menu__item" onClick={this.setLogout}>
              <i className="material-icons">power_settings_new</i>
              <span>Log out</span>
            </li>
          </ul>

          <MyProfileModal/>
        </header>
      );
    } else {
      return null;
    }
  }

  openMyProfile() {
    MyProfileActions.modalOpen();
    mixpanel.track('My profile open');
    this.setState({isOpened: false});
  }

}

export default HeaderSection;
